Merge branch 'master' of http://61.139.16.27:26684/DEV_ZZ/rsxm-master

src/views/portraitScreen/components/pxkcjh.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="tableBox">
+    <el-table :data="tableData" height="1540px" style="width: 100%">
+      <el-table-column label="序号" width="140px">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="课程名称" />
+      <el-table-column prop="starTime" label="开课时间" />
+      <el-table-column prop="endTime" label="结束时间" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const tableData = ref([
+  {
+    name: "人社局劳务经纪人培训",
+    starTime: "2025/9/24",
+    endTime: "2025/9/26"
+  },
+  {
+    name: "退役军人适应性培训",
+    starTime: "2025/10/16",
+    endTime: "2025/10/20"
+  },
+  {
+    name: "首席统计员培训项目",
+    starTime: "2025/10/14",
+    endTime: "2025/10/17"
+  },
+  {
+    name: "电工",
+    starTime: "2025/5/12",
+    endTime: "2025/6/6"
+  },
+  {
+    name: "焊工",
+    starTime: "2025/5/19",
+    endTime: "2025/6/13"
+  },
+  {
+    name: "钳工",
+    starTime: "2025/5/26",
+    endTime: "2025/6/20"
+  },
+  {
+    name: "人工智能训练师",
+    starTime: "2025/6/2",
+    endTime: "2025/6/27"
+  },
+  {
+    name: "无人机飞手",
+    starTime: "2025/6/16",
+    endTime: "2025/7/11"
+  }
+  // {
+  //   name: "手工木工",
+  //   starTime: "2025/7/14",
+  //   endTime: "2025/8/8"
+  // },
+  // {
+  //   name: "高空作业",
+  //   starTime: "2025/8/18",
+  //   endTime: "2025/9/12"
+  // },
+  // {
+  //   name: "学生就业指导",
+  //   starTime: "2025/9/1",
+  //   endTime: "2025/9/1"
+  // }
+]);
+</script>
+
+<style lang="scss" scoped>
+.tableBox {
+  width: 1440px;
+  margin: 0 auto;
+  margin-top: 50px;
+}
+::v-deep .el-table {
+  background-color: transparent;
+  --el-table-border-color: rgba(22, 65, 85, 0.9);
+  .cell {
+    line-height: normal;
+    color: #fff;
+  }
+}
+::v-deep .el-table__header-wrapper {
+  margin: 0 0 1px 0;
+}
+::v-deep .el-table .el-table__cell {
+  padding: 30px 0;
+}
+::v-deep .el-table th.el-table__cell {
+  background-color: #163155 !important;
+  color: #c4f3fe;
+  margin: 0 0 4px 0;
+  font-size: 40px;
+}
+::v-deep .el-table tr {
+  background-color: rgba(22, 43, 85, 0.5);
+}
+::v-deep .el-table tr:nth-child(even) {
+  background-color: rgba(22, 51, 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, 41, 85, 0.5);
+  font-size: 40px;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  border-bottom: 1px solid rgba(22, 41, 85, 0.9);
+}
+::v-deep
+  .el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background-color: rgb(16, 68, 171);
+  color: #fff;
+}
+</style>

src/views/portraitScreen/components/qyzpq.vue

@@ -0,0 +1,582 @@
+<template>
+  <div class="tableBox">
+    <el-table
+      ref="tableRef"
+      :data="tableData"
+      height="1540px"
+      style="width: 100%"
+    >
+      <el-table-column label="序号" width="200px">
+        <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>
+  </div>
+</template>
+
+<script setup>
+// import { ref, onMounted, onBeforeUnmount } from "vue";
+
+import { onMounted, ref, Ref } from "vue";
+const tableRef = ref(null); //表格实例
+// const tableData = ref<any[]>([]) //定义表格list
+//表格测试数据
+const getTableData = () => {
+  let data = [];
+  for (var i = 0; i <= 50; i++) {
+    data.push({
+      date: i,
+      name: `Tom${i}`,
+      address: `地区${i}`
+    });
+  }
+  return data;
+};
+
+onMounted(() => {
+  // tableData.value = getTableData() //表格数据赋值
+  scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
+});
+
+const scroll = (tableBody) => {
+  let isScroll = true; //滚动
+  const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
+
+  //鼠标放上去，停止滚动；移开，继续滚动
+  tableDom.addEventListener("mouseover", () => {
+    isScroll = false;
+  });
+  tableDom.addEventListener("mouseout", () => {
+    isScroll = true;
+  });
+
+  setInterval(() => {
+    if (isScroll) {
+      tableDom.scrollTop += 3; //设置滚动速度
+      if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
+        tableDom.scrollTop = 0;
+      }
+    }
+  }, 100);
+};
+
+const tableData = ref([
+  {
+    name: "比亚迪电子科技 (崇州) 有限公司",
+    street: "大划街道",
+    position: "操作工（正式工）",
+    recruitmentNum: "150"
+  },
+  {
+    name: "成都领益科技有限公司",
+    street: "崇阳街道",
+    position: "电子设备维修师",
+    recruitmentNum: "5"
+  },
+  {
+    name: "日东材料科技 (成都) 有限公司",
+    street: "崇阳街道",
+    position: "材料研发工程师",
+    recruitmentNum: "10"
+  },
+  {
+    name: "日东材料科技 (成都) 有限公司",
+    street: "崇阳街道",
+    position: "设备操作员",
+    recruitmentNum: "8"
+  },
+  {
+    name: "日东材料科技 (成都) 有限公司",
+    street: "崇阳街道",
+    position: "品保",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川福蓉科技股份公司",
+    street: "崇双路街道",
+    position: "铝合金加工技师",
+    recruitmentNum: "6"
+  },
+  {
+    name: "索菲亚家居（成都）有限公司",
+    street: "崇阳街道",
+    position: "安装售后专员",
+    recruitmentNum: "10"
+  },
+  {
+    name: "四川中源智慧电缆有限公司",
+    street: "崇阳街道",
+    position: "编织工",
+    recruitmentNum: "3"
+  },
+  {
+    name: "四川中源智慧电缆有限公司",
+    street: "崇阳街道",
+    position: "挤塑工",
+    recruitmentNum: "6"
+  },
+  {
+    name: "四川中源智慧电缆有限公司",
+    street: "崇阳街道",
+    position: "拉丝工",
+    recruitmentNum: "3"
+  },
+  {
+    name: "四川中源智慧电缆有限公司",
+    street: "崇阳街道",
+    position: "成缆工",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川中源智慧电缆有限公司",
+    street: "崇阳街道",
+    position: "绞线工",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "QC主管",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "销售经理",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "SQE工程师",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "研发工程师",
+    recruitmentNum: "4"
+  },
+  {
+    name: "全友家私有限公司",
+    street: "崇阳街道",
+    position: "组装操作工",
+    recruitmentNum: "8"
+  },
+  {
+    name: "融通农发牧原（崇州）有限责任公司",
+    street: "隆兴镇",
+    position: "养殖技术员",
+    recruitmentNum: "9"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "制瓶工",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "包装工",
+    recruitmentNum: "10"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "配料工 ",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "磨口工",
+    recruitmentNum: "3"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "灯工",
+    recruitmentNum: "3"
+  },
+  {
+    name: "成都达旺膜结构工程公司",
+    street: "青霞街道",
+    position: "膜结构业务员",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都兴兴蓉通信科技有限公司",
+    street: "崇阳街道",
+    position: "通信设备调试员",
+    recruitmentNum: "8"
+  },
+  {
+    name: "四川合丰运维科技有限公司",
+    street: "崇阳街道",
+    position: "信息化平台值班专员",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都市艾家食品有限公司",
+    street: "街子古镇",
+    position: "标签打码员",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都市艾家食品有限公司",
+    street: "街子古镇",
+    position: "销售",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都市艾家食品有限公司",
+    street: "街子古镇",
+    position: "香料粉碎工",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都市艾家食品有限公司",
+    street: "街子古镇",
+    position: "生产普工",
+    recruitmentNum: "10"
+  },
+  {
+    name: "成都市艾家食品有限公司",
+    street: "街子古镇",
+    position: "选香料临时工",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都恒兴昌科技有限公司",
+    street: "崇庆街道",
+    position: "普工（长白班）",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都市朗昇光电科技有限公司",
+    street: "崇庆街道",
+    position: "临时工",
+    recruitmentNum: "4"
+  },
+  {
+    name: "成都瀚林新材料科技有限公司",
+    street: "崇庆街道",
+    position: "普工(长白班)",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "包装工",
+    recruitmentNum: "10"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "制瓶工",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "配料工 ",
+    recruitmentNum: "5"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "磨口工",
+    recruitmentNum: "3"
+  },
+  {
+    name: "四川蜀玻（集团）有限责任公司",
+    street: "崇阳街道",
+    position: "灯工",
+    recruitmentNum: "3"
+  },
+  {
+    name: "成都安居天下实业有限责任公司",
+    street: "崇阳街道",
+    position: "钢制家具开料岗位",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都安居天下实业有限责任公司",
+    street: "崇阳街道",
+    position: "钢制家具喷塑岗位",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都安居天下实业有限责任公司",
+    street: "崇阳街道",
+    position: "钣金激光切割岗位",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都安居天下实业有限责任公司",
+    street: "崇阳街道",
+    position: "钣金折弯岗位",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都安居天下实业有限责任公司",
+    street: "崇阳街道",
+    position: "钢制家具钣金组焊岗位",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都安居天下实业有限责任公司",
+    street: "崇阳街道",
+    position: "实木办公家具配料岗位",
+    recruitmentNum: "1"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "品质主管",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "销售经理",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "SQE工程师",
+    recruitmentNum: "2"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "研发工程师",
+    recruitmentNum: "4"
+  },
+  {
+    name: "四川展新胶粘材料有限公司",
+    street: "崇阳街道",
+    position: "品质客户经理(CQM)",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都帝龙新材料有限公司",
+    street: "崇阳街道",
+    position: "接纸工",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都帝龙新材料有限公司",
+    street: "崇阳街道",
+    position: "操作工 ",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都帝龙新材料有限公司",
+    street: "崇阳街道",
+    position: "销售业务员",
+    recruitmentNum: "3"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "安装师傅",
+    recruitmentNum: "10"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "拆单",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "木工学徒",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "五金分拣",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "油漆主管",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "试装人员",
+    recruitmentNum: "nan"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "异形制作人员",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "五面钻打孔人员",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "封边人员",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "油漆工序质检人员",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "木工全能师傅",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "电子锯开料",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "包装",
+    recruitmentNum: "2"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "杂工（学徒）",
+    recruitmentNum: "1"
+  },
+  {
+    name: "成都艾瑞卡家居用品有限公司",
+    street: "崇阳街道",
+    position: "实木打磨",
+    recruitmentNum: "2"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "针车",
+    recruitmentNum: "10"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "手工",
+    recruitmentNum: "5"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "品检",
+    recruitmentNum: "5"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "普工",
+    recruitmentNum: "10"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "贴底",
+    recruitmentNum: "10"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "压机",
+    recruitmentNum: "10"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "刷白胶",
+    recruitmentNum: "10"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "打磨(PU)",
+    recruitmentNum: "10"
+  },
+  {
+    name: "崇州市华米科技有限公司",
+    street: "崇阳街道",
+    position: "贴标",
+    recruitmentNum: "10"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.tableBox {
+  width: 2880px;
+  margin: 0 auto;
+  margin-top: 50px;
+}
+::v-deep .el-table {
+  background-color: transparent;
+  --el-table-border-color: rgba(22, 65, 85, 0.9);
+  .cell {
+    line-height: normal;
+    color: #fff;
+  }
+}
+::v-deep .el-table__header-wrapper {
+  margin: 0 0 1px 0;
+}
+::v-deep .el-table .el-table__cell {
+  padding: 36px 0;
+}
+::v-deep .el-table th.el-table__cell {
+  background-color: #163155 !important;
+  color: #c4f3fe;
+  margin: 0 0 4px 0;
+  font-size: 40px;
+}
+::v-deep .el-table tr {
+  background-color: rgba(22, 43, 85, 0.5);
+}
+::v-deep .el-table tr:nth-child(even) {
+  background-color: rgba(22, 51, 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, 41, 85, 0.5);
+  font-size: 40px;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  border-bottom: 1px solid rgba(22, 41, 85, 0.9);
+}
+::v-deep
+  .el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background-color: rgb(16, 68, 171);
+  color: #fff;
+}
+</style>

src/views/portraitScreen/components/top10.vue

@@ -0,0 +1,124 @@
+<template>
+  <ul class="rankList">
+    <li v-for="(item, index) in rankData" :key="index">
+      <div class="jdtBox">
+        <div class="jdt" :style="{ width: item.proportion }"></div>
+      </div>
+      <div class="left">
+        <div class="sequence red" v-if="index == 0">{{ index + 1 }}</div>
+        <div class="sequence orange" v-else-if="index == 1">
+          {{ index + 1 }}
+        </div>
+        <div class="sequence yellow" v-else-if="index == 2">
+          {{ index + 1 }}
+        </div>
+        <div class="sequence" v-else>{{ index + 1 }}</div>
+        <div class="name">{{ item.name }}</div>
+      </div>
+      <div class="right">{{ item.count }}</div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+const rankData = ref([
+  { name: "电工培训", count: "120" },
+  { name: "焊工培训", count: "100" },
+  { name: "食品安全管理师培训", count: "95" },
+  { name: "手工木工", count: "78" },
+  { name: "公共营养师培训", count: "72" },
+  { name: "医疗护理员培训", count: "63" },
+  { name: "人工智能训练师培训", count: "48" },
+  { name: "无人机驾驶员培训", count: "40" },
+  { name: "高处安装维护拆除作业培训", count: "32" },
+  { name: "登高架设培训", count: "29" }
+]);
+const computeProportion = (num) => {
+  const counts = rankData.value.map((item) => parseInt(item.count));
+
+  const maxNumb = Math.max(...counts);
+  console.log("最大值", maxNumb);
+  for (let i = 0; i < rankData.value.length; i++) {
+    rankData.value[i].proportion =
+      ((parseInt(rankData.value[i].count) / maxNumb) * 100).toFixed(2) + "%";
+  }
+  console.log("比例", rankData.value);
+};
+onMounted(() => {
+  computeProportion();
+});
+</script>
+
+<style lang="scss" scoped>
+ul.rankList {
+  width: 100%;
+  margin: 0 auto;
+  li {
+    margin: 0 100px;
+    height: 70px;
+    background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0
+      0;
+    background-size: 100% 100%;
+    margin: 40px 0 0 0;
+    position: relative;
+    .left {
+      float: left;
+      .sequence {
+        position: absolute;
+        text-align: right;
+        top: 0px;
+        right: 1260px;
+        font-size: 38px;
+        height: 40px;
+        line-height: 24px;
+        color: #0a9eb5;
+        font-weight: bold;
+        font-size: 40px;
+        &.red {
+          color: #ff0000;
+        }
+        &.orange {
+          color: #ffa500;
+        }
+        &.yellow {
+          color: #ffd700;
+        }
+      }
+      .name {
+        font-size: 40px;
+        margin: 0 0 0 200px;
+        line-height: 80px;
+        height: 60px;
+      }
+    }
+    .right {
+      float: right;
+      height: 60px;
+      line-height: 80px;
+      font-size: 40px;
+      display: block;
+      background: -webkit-linear-gradient(#ffffff, #75e8ff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 400;
+    }
+    .jdtBox {
+      position: absolute;
+      top: 0px;
+      left: 194px;
+      right: 0px;
+      height: 4px;
+      .jdt {
+        height: 4px;
+        background: linear-gradient(
+          90deg,
+          rgba(53, 168, 235, 0) 0%,
+          #00ddff 100%
+        );
+        border-radius: 4px 4px 4px 4px;
+      }
+    }
+  }
+}
+</style>

src/views/portraitScreen/index copy.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="bigScrenn portraitBox">
+    <!-- 头部 -->
+    <div class="portratCnt noScollLine">
+      <!-- 头部 -->
+      <div class="port-head">
+        <Head title="崇州市就业生态链数据"></Head>
+        <div class="bg-bbb">
+          <Cygjbl></Cygjbl>
+        </div>
+        <!-- <ul class="ul-bbb">
+          <li class="bbb-item" v-for="(it, idx) in data.twoList" :key="idx">
+            <div class="top">{{ it.label }}</div>
+            <div class="cntBox">
+              <Gxjnppfx v-if="it.label == '技能岗位缺口TOP5'"></Gxjnppfx>
+              <Cygxfx v-if="it.label == '产业供需分析'"></Cygxfx>
+              <Gjgrzmyd v-if="it.label == '各行业需求TOP5'"></Gjgrzmyd>
+            </div>
+          </li>
+        </ul> -->
+      </div>
+      <!-- 第二部分 -->
+      <ul class="port-three">
+        <li
+          class="port-three-item"
+          v-for="(it, idx) in data.threeList"
+          :key="idx"
+        >
+          <div class="bt-Title tc">
+            <span>{{ it.title }}</span>
+          </div>
+          <ul class="childBox flex">
+            <li v-for="(iv, ix) in it.list" :key="ix" class="childItem">
+              <div class="info tc">{{ iv.label }}</div>
+              <div class="chartsBox">
+                <Jgsl v-if="iv.label == '服务机构分类与数量'"></Jgsl>
+                <Glrq v-if="iv.label == '各类人群就业率'"></Glrq>
+                <Csgf v-if="iv.label == '服务机构入职成功率'"></Csgf>
+                <Jgrzcgl v-if="iv.label == '技能型岗位需求'"></Jgrzcgl>
+                <Xxrcgw v-if="iv.label == '新兴人才岗位需求'" />
+                <Zdrc v-if="iv.label == '重点企业人才招聘技能要求'" />
+                <Jgmyd v-if="iv.label == '各类机构入职满意度'"></Jgmyd>
+                <Hyjyl v-if="iv.label == '行业就业率'"></Hyjyl>
+                <Xlccjyl v-if="iv.label == '学历层次就业率'"></Xlccjyl>
+                <Qylsry v-if="iv.label == '企业流失人员分析'"></Qylsry>
+                <Lsyyfx v-if="iv.label == '流失原因分析'"></Lsyyfx>
+                <Lxfx v-if="iv.label == '流向分析'"></Lxfx>
+                <Xxgwxq v-if="iv.label == '新型岗位需求'"></Xxgwxq>
+                <Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
+                <Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
+                <Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
+                <Jndqzpnd
+                  v-if="iv.label == '重点企业技能短缺招聘难度'"
+                ></Jndqzpnd>
+                <Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <!-- <ul class="port-four">
+        <li class="port-four-item" :key="idx">
+          <div class="bt-Title tc">
+            <span>人才流失趋势分析</span>
+          </div>
+          <div class="bottom_box">
+            <img src="@/assets/images/sjt.png" alt="">
+          </div>
+        </li>
+      </ul> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Head from "@/views/largeScreen/layout/head.vue";
+import Cygjbl from "./components/cygjbl.vue";
+import Gxjnppfx from "./components/gxjnppfx.vue";
+import Cygxfx from "./components/cygxfx.vue";
+import Ghyxqzf from "./components/ghyxqzf.vue";
+import Gjgrzmyd from "./components/gjgrzmyd.vue";
+import Jsxrcfb from "./components/jsxrcfb.vue";
+import Jgsl from "./components/Jgsl.vue";
+import Qylsry from "./components/qylsry.vue";
+import Lsyyfx from "./components/lsyyfx.vue";
+import Lxfx from "./components/lxfx.vue";
+import Xxrcgw from "./components/xxrcgw.vue";
+import Zdrc from "./components/zdrc.vue";
+import Glrq from "./components/glrq.vue";
+import Jgrzcgl from "./components/Jgrzcgl.vue";
+import Jgmyd from "./components/jgmyd.vue";
+import Csgf from "./components/csgf.vue";
+import Hyjyl from "./components/hyjyl.vue";
+import Xlccjyl from "./components/xlccjyl.vue";
+import Syl from "./components/syl.vue";
+import Jgpxfb from "./components/jgpxfb.vue";
+import Jnxgwxq from "./components/jnxgwxq.vue";
+import Xxgwxq from "./components/xxgwxq.vue";
+import Rcldyy from "./components/rcldyy.vue";
+import Jngwtop from "./components/jngwtop.vue";
+import Jndqzpnd from "./components/jndqzpnd.vue";
+import Gwxzdb from "./components/gwxzdb.vue";
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onBeforeUnmount
+} from "vue";
+const { proxy } = getCurrentInstance();
+const data = reactive({
+  twoList: [
+    { label: "产业供需分析" },
+    { label: "各行业需求TOP5" },
+    { label: "技能岗位缺口TOP5" }
+  ],
+  threeList: [
+    {
+      title: "人力资源服务市场",
+      list: [
+        { label: "服务机构分类与数量" },
+        { label: "服务机构入职成功率" },
+        { label: "各类人群就业率" }
+      ]
+    },
+    {
+      title: "人才结构分析",
+      list: [
+        { label: "技能型岗位需求" },
+        { label: "新兴人才岗位需求" },
+        { label: "重点企业人才招聘技能要求" }
+      ]
+    },
+    {
+      title: "人才流失趋势分析",
+      list: [
+        { label: "企业流失人员分析" },
+        { label: "流失原因分析" },
+        { label: "流向分析" }
+      ]
+    }
+  ]
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(to top, $color1 0%, $color2 50%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.portraitBox {
+  width: 100%;
+  background: url("~@/assets/images/0000.png") no-repeat center center;
+  background-size: 100% 100%;
+  padding: 0 40px;
+
+  .portratCnt {
+    width: 100%;
+    height: calc(100vh - 90px);
+    overflow: hidden;
+    .port-head {
+      height: calc(1800px - 190px);
+      // height: 1800px ;
+      margin-bottom: 10px;
+      border-radius: 10px;
+      margin-right: 4px;
+      margin-left: 4px;
+      margin-top: 190px;
+      position: relative;
+      background: url("~@/assets/images/top_bg.png") no-repeat center center;
+      background-size: 100% 100%;
+
+      .bg-bbb {
+        // height: 1300px;
+        height: 100%;
+        padding-top: 260px;
+      }
+
+      .ul-bbb {
+        width: 100%;
+        height: 500px;
+        position: absolute;
+        bottom: 34px;
+        left: 0;
+        width: 100%;
+        display: flex;
+
+        .bbb-item {
+          flex: 1;
+          height: 100%;
+          margin: 0 4px;
+          border-radius: 10px;
+          // background: url("~@/assets/images/fff.png") no-repeat center center;
+          // background-size: 100% 100%;
+
+          .top {
+            height: 120px;
+            line-height: 120px;
+            padding-left: 40px;
+            box-sizing: border-box;
+            font-size: 2.2vw;
+            font-family: "YSBTH";
+            position: relative;
+
+            &::before {
+              position: absolute;
+              content: "";
+              left: 20px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 16px;
+              height: 17px;
+              background: url("~@/assets/images/icon_20.png") no-repeat center
+                center;
+              background-size: 100% 100%;
+            }
+          }
+
+          .cntBox {
+            height: calc(100% - 120px);
+            overflow: hidden;
+          }
+        }
+      }
+    }
+
+    .port-three {
+      height: 2400px;
+
+      // background: url("~@/assets/images/bg_13.png") no-repeat center center;
+      // background-size: 100% 100%;
+
+      .port-three-item {
+        height: 50%;
+        min-height: 350px;
+        margin: 0 4px;
+        border-radius: 10px;
+        margin-bottom: 6px;
+
+        .bt-Title {
+          font-size: 2.8vw;
+          background: url("~@/assets/images/bg_14.png") no-repeat center center;
+          background-size: 100% 100%;
+          height: 120px;
+
+          span {
+            @include textColor(#499fe2, #ffffff);
+            font-family: "YSBTH";
+          }
+        }
+
+        .childBox {
+          height: calc(100% - 120px);
+          background: url("~@/assets/images/ggg.png") no-repeat center center;
+          .childItem {
+            flex: 1;
+            position: relative;
+
+            .info {
+              font-size: 2.2vw;
+              @include textColor(#09b8cf, #ffffff);
+              font-family: "YSBTH";
+            }
+
+            .chartsBox {
+              height: calc(100% - 125px);
+              overflow: hidden;
+            }
+
+            &::after {
+              position: absolute;
+              content: "";
+              top: 10px;
+              right: 0;
+              width: 3px;
+              height: 90%;
+              background: url("~@/assets/images/lien.png") no-repeat center
+                center;
+              background-size: 100% 100%;
+            }
+
+            &:nth-last-child(1) {
+              position: relative;
+
+              &::after {
+                position: absolute;
+                content: "";
+                background: none;
+              }
+            }
+          }
+        }
+
+        .bottom_box {
+          height: calc(100% - 56px);
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    .port-four {
+      height: 1200px;
+
+      .port-four-item {
+        height: 100%;
+        background: none;
+
+        .bt-Title {
+          font-size: 2.8vw;
+          background: url("~@/assets/images/bg_14.png") no-repeat center center;
+          background-size: 100% 100%;
+          height: 120px;
+
+          span {
+            @include textColor(#499fe2, #ffffff);
+            font-family: "YSBTH";
+          }
+        }
+
+        .bottom_box {
+          height: calc(100% - 120px);
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/portraitScreen/index.vue

@@ -4,10 +4,10 @@
     <div class="portratCnt noScollLine">
       <!-- 头部 -->
       <div class="port-head">
-        <Head title="崇州市就业生态链数据"></Head>
+        <Head title="兴蜀来了平台业务数据"></Head>
-        <div class="bg-bbb">
+        <!-- <div class="bg-bbb">
           <Cygjbl></Cygjbl>
-        </div>
+        </div> -->
         <!-- <ul class="ul-bbb">
           <li class="bbb-item" v-for="(it, idx) in data.twoList" :key="idx">
             <div class="top">{{ it.label }}</div>
@@ -19,83 +19,51 @@
           </li>
         </ul> -->
       </div>
-      <!-- 第二部分 -->
+      <div class="bigBox">
-      <ul class="port-three">
+        <div class="pubTitle">人才机构分析</div>
-        <li class="port-three-item" v-for="(it, idx) in data.threeList" :key="idx">
+        <ul class="chartsBox">
-          <div class="bt-Title tc">
+          <li>
-            <span>{{ it.title }}</span>
+            <div class="info">技能型岗位需求</div>
-          </div>
+            <div class="chartsMian"><Jgrzcgl></Jgrzcgl></div>
-          <ul class="childBox flex">
+          </li>
-            <li v-for="(iv, ix) in it.list" :key="ix" class="childItem">
+          <li>
-              <div class="info tc">{{ iv.label }}</div>
+            <div class="info">新兴人才岗位需求</div>
-              <div class="chartsBox">
+            <div class="chartsMian"><Xxrcgw /></div>
-                <Jgsl v-if="iv.label == '服务机构分类与数量'"></Jgsl>
+          </li>
-                <Glrq v-if="iv.label == '各类人群就业率'"></Glrq>
+          <li>
-                <Csgf v-if="iv.label == '服务机构入职成功率'"></Csgf>
+            <div class="info">重点企业人才招聘技能要求</div>
-                <Jgrzcgl v-if="iv.label == '技能型岗位需求'"></Jgrzcgl>
+            <div class="chartsMian"><Zdrc /></div>
-                <Xxrcgw v-if="iv.label == '新兴人才岗位需求'" />
+          </li>
-                <Zdrc v-if="iv.label == '重点企业人才招聘技能要求'" />
+        </ul>
-                <Jgmyd v-if="iv.label == '各类机构入职满意度'"></Jgmyd>
+      </div>
-                <Hyjyl v-if="iv.label == '行业就业率'"></Hyjyl>
+      <div class="bigBox" style="margin-top: 75px; height: 1830px">
-                <Xlccjyl v-if="iv.label == '学历层次就业率'"></Xlccjyl>
+        <div class="pubTitle" style="height: 180px; line-height: 200px">
-                <Qylsry v-if="iv.label == '企业流失人员分析'"></Qylsry>
+          企业招聘情况
-                <Lsyyfx v-if="iv.label == '流失原因分析'"></Lsyyfx>
+        </div>
-                <Lxfx v-if="iv.label == '流向分析'"></Lxfx>
+        <div class="mainBox">
-                <Xxgwxq v-if="iv.label == '新型岗位需求'"></Xxgwxq>
+          <Qyzpq></Qyzpq>
-                <Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
+        </div>
-                <Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
+      </div>
-                <Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
+      <div class="bigBox" style="margin-top: 75px; height: 1830px">
-                <Jndqzpnd v-if="iv.label == '重点企业技能短缺招聘难度'"></Jndqzpnd>
+        <div class="pubTitle" style="height: 180px; line-height: 200px">
-                <Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
+          兴蜀来了培训产品 online
-              </div>
+        </div>
-            </li>
+        <ul class="chartsBox">
-          </ul>
+          <li style="width: 50%">
-        </li>
+            <div class="info">培训课程top10</div>
-      </ul>
+            <div class="chartsMian"><Top10></Top10></div>
-      <!-- <ul class="port-four">
+          </li>
-        <li class="port-four-item" :key="idx">
+          <li style="width: 50%">
-          <div class="bt-Title tc">
+            <div class="info">培训课程计划</div>
-            <span>人才流失趋势分析</span>
+            <div class="chartsMian"><Pxkcjh></Pxkcjh></div>
-          </div>
+          </li>
-          <div class="bottom_box">
+        </ul>
-            <img src="@/assets/images/sjt.png" alt="">
+      </div>
-          </div>
-        </li>
-      </ul> -->
     </div>
   </div>
 </template>
 
 <script setup>
-import Head from "@/views/largeScreen/layout/head.vue";
-import Cygjbl from "./components/cygjbl.vue";
-import Gxjnppfx from "./components/gxjnppfx.vue";
-import Cygxfx from "./components/cygxfx.vue";
-import Ghyxqzf from "./components/ghyxqzf.vue";
-import Gjgrzmyd from "./components/gjgrzmyd.vue";
-import Jsxrcfb from "./components/jsxrcfb.vue";
-import Jgsl from "./components/Jgsl.vue";
-import Qylsry from "./components/qylsry.vue";
-import Lsyyfx from "./components/lsyyfx.vue";
-import Lxfx from "./components/lxfx.vue";
-import Xxrcgw from "./components/xxrcgw.vue";
-import Zdrc from "./components/zdrc.vue";
-import Glrq from "./components/glrq.vue";
-import Jgrzcgl from "./components/Jgrzcgl.vue";
-import Jgmyd from "./components/jgmyd.vue";
-import Csgf from "./components/csgf.vue";
-import Hyjyl from "./components/hyjyl.vue";
-import Xlccjyl from "./components/xlccjyl.vue";
-import Syl from "./components/syl.vue";
-import Jgpxfb from "./components/jgpxfb.vue";
-import Jnxgwxq from "./components/jnxgwxq.vue";
-import Xxgwxq from "./components/xxgwxq.vue";
-import Rcldyy from "./components/rcldyy.vue";
-import Jngwtop from "./components/jngwtop.vue";
-import Jndqzpnd from "./components/jndqzpnd.vue";
-import Gwxzdb from "./components/gwxzdb.vue";
-import { qcckPost, qcckGet } from "@/api/qcckApi.js";
-import emitter from "@/utils/eventBus.js";
 import {
   ref,
   reactive,
@@ -104,12 +72,20 @@ import {
   getCurrentInstance,
   onBeforeUnmount
 } from "vue";
+import Head from "@/views/largeScreen/layout/head.vue";
+import Xxrcgw from "./components/xxrcgw.vue";
+import Zdrc from "./components/zdrc.vue";
+import Jgrzcgl from "./components/Jgrzcgl.vue";
+import Top10 from "./components/top10.vue";
+import Qyzpq from "./components/qyzpq.vue";
+import Pxkcjh from "./components/pxkcjh.vue";
+
 const { proxy } = getCurrentInstance();
 const data = reactive({
   twoList: [
     { label: "产业供需分析" },
     { label: "各行业需求TOP5" },
-    { label: "技能岗位缺口TOP5" },
+    { label: "技能岗位缺口TOP5" }
   ],
   threeList: [
     {
@@ -117,7 +93,7 @@ const data = reactive({
       list: [
         { label: "服务机构分类与数量" },
         { label: "服务机构入职成功率" },
-        { label: "各类人群就业率" },
+        { label: "各类人群就业率" }
       ]
     },
     {
@@ -133,7 +109,7 @@ const data = reactive({
       list: [
         { label: "企业流失人员分析" },
         { label: "流失原因分析" },
-        { label: "流向分析" },
+        { label: "流向分析" }
       ]
     }
   ]
@@ -141,6 +117,60 @@ const data = reactive({
 </script>
 
 <style lang="scss" scoped>
+.pubTitle {
+  height: 146px;
+  line-height: 146px;
+  text-align: center;
+  font-size: 60px;
+}
+.bigBox {
+  width: 2988px;
+  height: 1480px;
+  background: url("~@/assets/images/largeScreen2/bigBox-bg.png") no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  ul.chartsBox {
+    width: 100%;
+    display: flex;
+    flex-wrap: no-wrap;
+    height: calc(100% - 146px);
+    li {
+      width: 33.33%;
+      height: 100%;
+      padding: 20px 50px;
+      box-sizing: border-box;
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 1300px;
+        background: url("~@/assets/images/largeScreen2/vertical-line.png")
+          no-repeat;
+        background-size: 100% 100%;
+        right: 0px;
+        top: 20px;
+      }
+      &:last-child::after {
+        display: none;
+      }
+      .info {
+        height: 140px;
+        text-align: center;
+        line-height: 140px;
+        font-size: 50px;
+      }
+      .chartsMian {
+        width: 100%;
+        height: calc(100% - 140px);
+      }
+    }
+  }
+  .mainBox {
+    height: calc(100% - 180px);
+  }
+}
+
 @import "@/assets/css/homeScreen.scss";
 
 @mixin textColor($color1, $color2) {
@@ -160,15 +190,14 @@ const data = reactive({
     height: calc(100vh - 90px);
     overflow: hidden;
     .port-head {
-      height: calc(1800px - 190px);
+      height: 170px;
-      // height: 1800px ;
       margin-bottom: 10px;
       border-radius: 10px;
       margin-right: 4px;
       margin-left: 4px;
       margin-top: 190px;
       position: relative;
-      background: url("~@/assets/images/top_bg.png") no-repeat center center;
+      // background: url("~@/assets/images/top_bg.png") no-repeat center center;
       background-size: 100% 100%;
 
       .bg-bbb {
@@ -205,13 +234,14 @@ const data = reactive({
 
             &::before {
               position: absolute;
-              content: '';
+              content: "";
               left: 20px;
               top: 50%;
               transform: translateY(-50%);
               width: 16px;
               height: 17px;
-              background: url("~@/assets/images/icon_20.png") no-repeat center center;
+              background: url("~@/assets/images/icon_20.png") no-repeat center
+                center;
               background-size: 100% 100%;
             }
           }
@@ -226,7 +256,7 @@ const data = reactive({
 
     .port-three {
       height: 2400px;
-      
+
       // background: url("~@/assets/images/bg_13.png") no-repeat center center;
       // background-size: 100% 100%;
 
@@ -251,11 +281,10 @@ const data = reactive({
 
         .childBox {
           height: calc(100% - 120px);
-          background: url('~@/assets/images/ggg.png') no-repeat center center;
+          background: url("~@/assets/images/ggg.png") no-repeat center center;
           .childItem {
             flex: 1;
             position: relative;
-            
 
             .info {
               font-size: 2.2vw;
@@ -270,12 +299,13 @@ const data = reactive({
 
             &::after {
               position: absolute;
-              content: '';
+              content: "";
               top: 10px;
               right: 0;
               width: 3px;
               height: 90%;
-              background: url("~@/assets/images/lien.png") no-repeat center center;
+              background: url("~@/assets/images/lien.png") no-repeat center
+                center;
               background-size: 100% 100%;
             }
 
@@ -284,7 +314,7 @@ const data = reactive({
 
               &::after {
                 position: absolute;
-                content: '';
+                content: "";
                 background: none;
               }
             }
@@ -333,4 +363,4 @@ const data = reactive({
     }
   }
 }
-</style>
+</style>