兴蜀来了平台业务数据大屏页面、三级劳务体系⼈员数据大屏页面、“产教评”融合培训平台大屏页面

src/components/largeScreen/bottomBorder.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="bottomBorder"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.bottomBorder {
+  height: 36px;
+  background: url("~@/assets/images/largeScreen/bottomBorder.png") no-repeat
+    center;
+  background-size: 100%;
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+</style>

src/components/largeScreen/headHome.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="homeHeadsmall">
+    <div class="left_Head">
+      <el-icon style="top: 5px" color="#0DE7EE" :size="20"><Cloudy /></el-icon>
+      <span class="head_text ml5 mr5">小雨</span>
+      <span class="head_text ml5">13°C</span>
+    </div>
+    <div class="center_head" :text="props.title">
+      <span>{{ props.title }}</span>
+    </div>
+    <div class="right_head">
+      <span class="head_text ml5 mr5">{{
+        hour + ":" + minute + ":" + second
+      }}</span>
+      <span class="head_text ml5 mr5">{{ weekenday }} </span>
+      <span class="head_text ml5">{{ datatime }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { timeValidate, weekValidate } from "@/utils/tools.js";
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onBeforeUnmount
+} from "vue";
+const { proxy } = getCurrentInstance();
+const minute = ref("00"); //分
+const second = ref("00"); //秒
+const hour = ref("00"); //时
+const day = ref();
+const weekenday = weekValidate(); //星期几
+const datatime = ref(timeValidate(null, "ymd"));
+const timersfm = ref(null);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "兴蜀数智化驾驶舱"
+  }
+});
+onMounted(() => {
+  timersfm.value = setInterval(() => {
+    CurrentTime();
+  }, 1000);
+});
+// 获取时分秒
+function CurrentTime() {
+  const date = new Date();
+  hour.value = date.getHours();
+  minute.value = date.getMinutes();
+  second.value = date.getSeconds();
+  day.value = day.value < 10 ? "0" + day.value : day.value;
+  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
+  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
+  second.value = second.value < 10 ? "0" + second.value : second.value;
+}
+onUnmounted(() => {
+  clearInterval(timersfm.value);
+});
+</script>
+
+<style lang="scss" scoped>
+.head_text {
+  font-size: 16px;
+}
+// 头部
+.homeHead,
+.homeHeadsmall {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 8;
+  height: 90px;
+  background: url("~@/assets/images/largeScreen/top-bg.png") no-repeat center;
+  background-size: 100%;
+
+  .left_Head {
+    position: absolute;
+    left: 30px;
+    top: 40px;
+    font-family: "DigifaceWide";
+  }
+
+  .center_head {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    height: 90px;
+    line-height: 90px;
+    transform: translateX(-50%);
+    font-size: 44px;
+    font-family: "YSBTH";
+    letter-spacing: 5px;
+    font-weight: 400;
+    white-space: nowrap;
+
+    span {
+      background-image: linear-gradient(to top, #165493 10%, #ffffff 50%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    &::before {
+      content: attr(text);
+      position: absolute;
+      z-index: -2;
+    }
+  }
+
+  .right_head {
+    position: absolute;
+    right: 30px;
+    top: 40px;
+  }
+}
+</style>

src/components/largeScreen/leftBorder.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="leftBorder"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.leftBorder {
+  width: 20px;
+  height: 3240px;
+  background: url("~@/assets/images/largeScreen/leftBorder.png") no-repeat;
+  background-size: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

src/components/largeScreen/rightBorder.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="rightBorder"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.rightBorder {
+  width: 20px;
+  height: 3240px;
+  background: url("~@/assets/images/largeScreen/rightBorder.png") no-repeat;
+  background-size: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>

src/router/index.js

@@ -55,6 +55,27 @@ export const publicRoutes = [
     name: "/mapCount",
     component: () => import("@/views/mapCount/index"),
     meta: {}
+  },
+  // 三级劳务体系⼈员数据大屏
+  {
+    path: "/threeLaborService",
+    name: "/threeLaborService",
+    component: () => import("@/views/threeLaborService/index"),
+    meta: {}
+  },
+  // “产教评”融合培训平台
+  {
+    path: "/integratedTrainingPlatform",
+    name: "/integratedTrainingPlatform",
+    component: () => import("@/views/integratedTrainingPlatform/index"),
+    meta: {}
+  },
+  // 兴蜀来了平台业务数据
+  {
+    path: "/platformBusinessData",
+    name: "/platformBusinessData",
+    component: () => import("@/views/platformBusinessData/index"),
+    meta: {}
   }
 ];
 

src/views/integratedTrainingPlatform/components/contentOneBoxOne.vue

@@ -0,0 +1,122 @@
+<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: "Java开发培训", 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: 828px;
+  margin: 0 auto;
+  li {
+    width: 100%;
+    height: 36px;
+    background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0
+      0;
+    margin: 20px 0 0 0;
+    position: relative;
+    .left {
+      float: left;
+      .sequence {
+        position: absolute;
+        text-align: right;
+        top: 0px;
+        right: 750px;
+        font-size: 18px;
+        height: 20px;
+        line-height: 12px;
+        color: #0a9eb5;
+        font-weight: bold;
+        &.red {
+          color: #ff0000;
+        }
+        &.orange {
+          color: #ffa500;
+        }
+        &.yellow {
+          color: #ffd700;
+        }
+      }
+      .name {
+        font-size: 20px;
+        margin: 0 0 0 100px;
+        line-height: 40px;
+        height: 30px;
+      }
+    }
+    .right {
+      float: right;
+      height: 30px;
+      line-height: 40px;
+      font-size: 20px;
+      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: 97px;
+      right: 0px;
+      height: 2px;
+      .jdt {
+        height: 2px;
+        background: linear-gradient(
+          90deg,
+          rgba(53, 168, 235, 0) 0%,
+          #00ddff 100%
+        );
+        border-radius: 2px 2px 2px 2px;
+      }
+    }
+  }
+}
+</style>

src/views/integratedTrainingPlatform/components/contentOneBoxTwo.vue

@@ -0,0 +1,115 @@
+<template>
+  <!-- 表格 -->
+  <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="startTime" label="开始时间" />
+      <el-table-column prop="endTime" label="结束时间" />
+      <el-table-column prop="address" label="地点" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const tableData = ref([
+  {
+    name: "会计学",
+    startTime: "2025-05-22",
+    endTime: "2025-05-25",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "电工培训",
+    startTime: "2025-05-23",
+    endTime: "2025-05-24",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "焊工培训",
+    startTime: "2025-05-23",
+    endTime: "2025-05-25",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "钳工培训",
+    startTime: "2025-05-24",
+    endTime: "2025-05-27",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "厨师培训",
+    startTime: "2025-06-08",
+    endTime: "2025-06-10",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "会计学",
+    startTime: "2025-06-10",
+    endTime: "2025-06-11",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "管理学",
+    startTime: "2025-06-14",
+    endTime: "2025-06-17",
+    address: "崇州重阳街道"
+  },
+  {
+    name: "成功学",
+    startTime: "2025-06-22",
+    endTime: "2025-06-25",
+    address: "崇州重阳街道"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.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>

src/views/integratedTrainingPlatform/components/contentThreeBoxFour.vue

@@ -0,0 +1,162 @@
+<template>
+  <!-- 页面的 HTML 模板部分 -->
+  <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">47</span><span class="proportion">34.55%</span>
+        </div>
+      </li>
+      <li>
+        <div><span class="blockTwo"></span><span>初级证书</span></div>
+        <div>
+          <span class="numb">58</span><span class="proportion">42.02%</span>
+        </div>
+      </li>
+      <li>
+        <div><span class="blockThree"></span><span>中级证书</span></div>
+        <div>
+          <span class="numb">23</span><span class="proportion">16.66%</span>
+        </div>
+      </li>
+      <li>
+        <div><span class="blockFour"></span><span>高级证书</span></div>
+        <div>
+          <span class="numb">8</span><span class="proportion">5.79%</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: 47, name: "劳务经济人证书", itemStyle: { color: "#58A8FF" } },
+        { value: 58, name: "初级证书", itemStyle: { color: "#30DCFF" } },
+        { value: 23, name: "中级证书", itemStyle: { color: "#ffffff" } },
+        { value: 8, name: "高级证书", itemStyle: { color: "#dd7d4d" } }
+      ]
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (pieRef.value) {
+    const chart = echarts.init(pieRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pieBigBox {
+  width: 600px;
+  margin: 0 auto;
+  height: 274px;
+  .pieMain {
+    position: relative;
+    border: 1px solid transparent;
+    float: left;
+    .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: -0px;
+    }
+  }
+  ul.pieLsit {
+    float: left;
+    margin: 10px 0 0 20px;
+    border: 1px solid transparent;
+    padding: 10px 0 0 0;
+    width: 340px;
+    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,
+      .blockFour {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-right: 8px;
+      }
+      .blockOne {
+        background-color: #58a8ff;
+      }
+      .blockTwo {
+        background-color: #30dcff;
+      }
+      .blockThree {
+        background-color: #ffffff;
+      }
+      .blockFour {
+        background-color: #dd7d4d;
+      }
+      .proportion {
+        display: inline-block;
+        width: 80px;
+        text-align: right;
+      }
+    }
+  }
+}
+</style>

src/views/integratedTrainingPlatform/components/contentThreeBoxOne.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="chartBox" ref="institutionalTrendsRef"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const institutionalTrendsRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "30px",
+    left: "50px",
+    right: "40px",
+    bottom: "50px"
+  },
+  tooltip: {
+    trigger: "axis"
+  },
+  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: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
+      // 设置柱状图的数值
+      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)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (institutionalTrendsRef.value) {
+    const chart = echarts.init(institutionalTrendsRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 274px;
+}
+</style>

src/views/integratedTrainingPlatform/components/contentThreeBoxThree.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="chartBox" ref="laborSystemOneRef"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const laborSystemOneRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "30px",
+    left: "50px",
+    right: "40px",
+    bottom: "40px"
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "none"
+    },
+    formatter: function (params) {
+      return params[0].name + ": " + params[0].value;
+    }
+  },
+  xAxis: {
+    data: [
+      "崇州",
+      "武侯",
+      "高新",
+      "金牛",
+      "锦江",
+      "青羊",
+      "新津",
+      "简阳",
+      "郫县",
+      "新都"
+    ],
+    axisLabel: {
+      textStyle: {
+        color: "#CBF2FA"
+      }
+    }
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    }
+  },
+  // color: ["#fff"],
+  series: [
+    {
+      name: "hill",
+      type: "pictorialBar",
+      barCategoryGap: "30%",
+      symbol: "triangle",
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF"
+      },
+      itemStyle: {
+        //渐变色
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(48, 220, 255, 1)" },
+            { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
+          ]
+        }
+      },
+      data: [123, 60, 125, 80, 90, 100, 120, 80, 100, 120],
+      z: 10
+    },
+    {
+      name: "glyph",
+      type: "pictorialBar",
+      barGap: "-100%",
+      symbolPosition: "end",
+      symbolSize: 50,
+      symbolOffset: [0, "-120%"]
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (laborSystemOneRef.value) {
+    const chart = echarts.init(laborSystemOneRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 274px;
+}
+</style>

src/views/integratedTrainingPlatform/components/contentThreeBoxTwo.vue

@@ -0,0 +1,116 @@
+<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" }
+]);
+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: 828px;
+  margin: 0 auto;
+  li {
+    width: 100%;
+    height: 36px;
+    background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0
+      0;
+    margin: 25px 0 0 0;
+    position: relative;
+    .left {
+      float: left;
+      .sequence {
+        position: absolute;
+        text-align: right;
+        top: 0px;
+        right: 750px;
+        font-size: 18px;
+        height: 20px;
+        line-height: 12px;
+        color: #0a9eb5;
+        font-weight: bold;
+        &.red {
+          color: #ff0000;
+        }
+        &.orange {
+          color: #ffa500;
+        }
+        &.yellow {
+          color: #ffd700;
+        }
+      }
+      .name {
+        font-size: 20px;
+        margin: 0 0 0 100px;
+        line-height: 40px;
+        height: 30px;
+      }
+    }
+    .right {
+      float: right;
+      height: 30px;
+      line-height: 40px;
+      font-size: 20px;
+      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: 97px;
+      right: 0px;
+      height: 2px;
+      .jdt {
+        height: 2px;
+        background: linear-gradient(
+          90deg,
+          rgba(53, 168, 235, 0) 0%,
+          #00ddff 100%
+        );
+        border-radius: 2px 2px 2px 2px;
+      }
+    }
+  }
+}
+</style>

src/views/integratedTrainingPlatform/components/contentTwoBoxOne.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="institutionalTrendsBox" ref="institutionalTrendsRef"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const institutionalTrendsRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "50px",
+    left: "50px",
+    right: "40px",
+    bottom: "50px"
+  },
+  tooltip: {
+    trigger: "axis"
+  },
+  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: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
+      // 设置柱状图的数值
+      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)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (institutionalTrendsRef.value) {
+    const chart = echarts.init(institutionalTrendsRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.institutionalTrendsBox {
+  width: 100%;
+  height: 638px;
+}
+</style>

src/views/integratedTrainingPlatform/components/contentTwoBoxThree.vue

@@ -0,0 +1,148 @@
+<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
+  },
+  {
+    name: "名族舞培训",
+    num: 71
+  },
+  {
+    name: "管理学培训",
+    num: 45
+  },
+  {
+    name: "奥数培训",
+    num: 36
+  },
+  {
+    name: "机修培训",
+    num: 68
+  },
+  {
+    name: "汽修培训",
+    num: 154
+  },
+  {
+    name: "AI训练员培训",
+    num: 28
+  },
+  {
+    name: "高级技工培训",
+    num: 34
+  },
+  {
+    name: "数学培训",
+    num: 51
+  }
+]);
+// 生命周期钩子
+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/largeScreen/listIcon-kc.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>

src/views/integratedTrainingPlatform/components/contentTwoBoxTwo.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="chartsBox" 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: "50px",
+    left: "50px",
+    right: "30px",
+    bottom: "50px"
+  },
+  // 设置图例
+  legend: {
+    itemWidth: 10, // 方块宽度
+    itemHeight: 10, // 方块高度
+    textStyle: {
+      color: "#B2D9DF" // 文字颜色
+    },
+    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
+    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
+    padding: [20, 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: "bar",
+      showBackground: true,
+      barWidth: 8,
+      data: [76, 32, 87, 65, 34, 23, 52, 60, 75, 53, 62, 41],
+      // 设置柱状图的数值
+      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, 35, 23, 42, 31, 33, 25],
+      // 设置柱状图的数值
+      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>
+.chartsBox {
+  width: 100%;
+  height: 638px;
+}
+</style>

src/views/integratedTrainingPlatform/components/statisticOne.vue

@@ -0,0 +1,87 @@
+<template>
+  <ul class="statisticOne">
+    <li v-for="(item, index) in statisticData" :key="index">
+      <img :src="item.imgURL" :alt="item.title" />
+      <div class="infoBox">
+        <div class="title">
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="count">
+          <span class="numb">{{ item.count }}</span
+          >（{{ item.unit }}）
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
+import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
+import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
+const statisticData = ref([
+  {
+    imgURL: tongjiPxjg,
+    title: "培训机构数",
+    count: "46",
+    unit: "家"
+  },
+  {
+    imgURL: tongjiPxkc,
+    title: "培训课程数",
+    count: "236",
+    unit: "节"
+  },
+  {
+    imgURL: tongjiPxrs,
+    title: "培训⼈数",
+    count: "5623",
+    unit: "人"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+ul.statisticOne {
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  li {
+    width: 450px;
+    height: 190px;
+    margin: 0 10px;
+    img {
+      display: block;
+      width: 190px;
+      height: 190px;
+      float: left;
+    }
+    .infoBox {
+      float: left;
+      padding: 0 0 0 10px;
+      .title {
+        height: 40px;
+        line-height: 40px;
+        margin-top: 36px;
+        span {
+          background: -webkit-linear-gradient(#ffffff, #75e8ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 32px;
+          font-weight: 400;
+        }
+      }
+      .count {
+        font-size: 24px;
+        padding: 18px 0 0 0;
+        span.numb {
+          font-size: 64px;
+          display: inline-block;
+          padding: 0 5px 0 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/integratedTrainingPlatform/components/statisticTwo.vue

@@ -0,0 +1,75 @@
+<template>
+  <ul class="statisticOne">
+    <li v-for="(item, index) in props.tabsData" :key="index">
+      <img :src="item.imgURL" :alt="item.title" />
+      <div class="infoBox">
+        <div class="title">
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="count">
+          <span class="numb">{{ item.count }}</span
+          >（{{ item.unit }}）
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref, defineProps, onMounted } from "vue";
+const props = defineProps({
+  tabsData: {
+    type: Array,
+    default: () => []
+  }
+});
+onMounted(() => {
+  console.log(props.tabsData);
+});
+</script>
+
+<style lang="scss" scoped>
+ul.statisticOne {
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  margin-top: 14px;
+  li {
+    width: 450px;
+    height: 190px;
+    margin: 0 10px;
+    img {
+      display: block;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin: 60px 10px 0 0;
+    }
+    .infoBox {
+      float: left;
+      padding: 0 0 0 10px;
+      .title {
+        height: 40px;
+        line-height: 40px;
+        margin-top: 36px;
+        span {
+          background: -webkit-linear-gradient(#ffffff, #75e8ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 32px;
+          font-weight: 400;
+        }
+      }
+      .count {
+        font-size: 24px;
+        padding: 10px 0 0 0;
+        span.numb {
+          font-size: 64px;
+          display: inline-block;
+          padding: 0 5px 0 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/integratedTrainingPlatform/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="allBox">
+    <!-- 头部 -->
+    <Head title="“产教评”融合培训平台"></Head>
+    <LeftBorder></LeftBorder>
+    <RightBorder></RightBorder>
+    <BottomBorder></BottomBorder>
+    <div class="mainBox">
+      <div class="title"><span>兴蜀来了培训产品 online</span></div>
+      <div class="contentBox">
+        <StatisticOne style="margin-top: 50px"></StatisticOne>
+        <ul class="contentOne">
+          <li>
+            <div class="pubTitle">培训内容TOP10</div>
+            <ConentOneBoxOne></ConentOneBoxOne>
+          </li>
+          <li>
+            <div class="pubTitle">培训课程计划</div>
+            <ConentOneBoxTwo></ConentOneBoxTwo>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="mainBox">
+      <div class="title"><span>培训机构情况</span></div>
+      <div class="contentBox">
+        <StatisticTwo :tabsData="pxjgTabData"></StatisticTwo>
+        <ul class="contentTwo">
+          <li>
+            <div class="pubTitle">培训机构数量变化趋势</div>
+            <ContentTwoBoxOne></ContentTwoBoxOne>
+          </li>
+          <li>
+            <div class="pubTitle">培训用户数量统计</div>
+            <ContentTwoBoxTwo></ContentTwoBoxTwo>
+          </li>
+          <li>
+            <div class="pubTitle">各类培训课程人数统计</div>
+            <ContentTwoBoxThree></ContentTwoBoxThree>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="mainBox">
+      <div class="title"><span>证书发证情况</span></div>
+      <div class="contentBox">
+        <StatisticTwo :tabsData="zsfzTabData"></StatisticTwo>
+        <ul class="contentThree">
+          <li>
+            <div class="pubTitle">证书发证变化趋势</div>
+            <ContentThreeBoxOne></ContentThreeBoxOne>
+          </li>
+          <li>
+            <div class="pubTitle">热门证书TOP5</div>
+            <ContentThreeBoxTwo></ContentThreeBoxTwo>
+          </li>
+          <li>
+            <div class="pubTitle">各地区发证数量统计</div>
+            <ContentThreeBoxThree></ContentThreeBoxThree>
+          </li>
+          <li>
+            <div class="pubTitle">各类证书发证数量占比</div>
+            <ContentThreeBoxFour></ContentThreeBoxFour>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Head from "../../components/largeScreen/headHome.vue";
+import LeftBorder from "../../components/largeScreen/leftBorder.vue";
+import RightBorder from "../../components/largeScreen/rightBorder.vue";
+import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
+import StatisticOne from "./components/statisticOne.vue";
+import ConentOneBoxOne from "./components/contentOneBoxOne.vue";
+import ConentOneBoxTwo from "./components/contentOneBoxTwo.vue";
+import StatisticTwo from "./components/statisticTwo.vue";
+import ContentTwoBoxOne from "./components/contentTwoBoxOne.vue";
+import ContentTwoBoxTwo from "./components/contentTwoBoxTwo.vue";
+import ContentTwoBoxThree from "./components/contentTwoBoxThree.vue";
+import ContentThreeBoxOne from "./components/contentThreeBoxOne.vue";
+import ContentThreeBoxTwo from "./components/contentThreeBoxTwo.vue";
+import ContentThreeBoxThree from "./components/contentThreeBoxThree.vue";
+import ContentThreeBoxFour from "./components/contentThreeBoxFour.vue";
+
+import tongji2Yhjh from "@/assets/images/largeScreen/tongji2-yhjh.png";
+import tongji2Hyyh from "@/assets/images/largeScreen/tongji2-hyyh.png";
+import tongji2Dtzxfz from "@/assets/images/largeScreen/tongji2-dtzxfz.png";
+import tongji3Jjrzs from "@/assets/images/largeScreen/tongji3-jjrzs.png";
+import tongji3Jgzgz from "@/assets/images/largeScreen/tongji3-jgzgz.png";
+// 定义标题名称
+const title = "三级劳务体系⼈员数据";
+const pxjgTabData = ref([
+  {
+    imgURL: tongji2Yhjh,
+    title: "用户激活总数",
+    count: "5243",
+    unit: "人"
+  },
+  {
+    imgURL: tongji2Hyyh,
+    title: "近30天活跃用户数",
+    count: "2315",
+    unit: "人"
+  },
+  {
+    imgURL: tongji2Dtzxfz,
+    title: "当天在线峰值",
+    count: "623",
+    unit: "人"
+  }
+]);
+const zsfzTabData = ref([
+  {
+    imgURL: tongji3Jjrzs,
+    title: "劳务经纪人证书总数",
+    count: "243",
+    unit: "个"
+  },
+  {
+    imgURL: tongji3Jgzgz,
+    title: "技工资格证总数",
+    count: "1315",
+    unit: "个"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.pubTitle {
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  font-size: 24px;
+  color: #c4f3fe;
+  margin-top: 20px;
+  background: url("~@/assets/images/largeScreen/pubTitle-bg60.png") no-repeat
+    center;
+  background-size: auto 100%;
+}
+.allBox {
+  width: 1920px;
+  height: 3240px;
+  margin: 0 auto;
+  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
+  background-size: 100%;
+  position: relative;
+}
+.mainBox {
+  width: 1862px;
+  height: 1000px;
+  margin: 0 auto;
+  margin-top: 30px;
+  .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;
+    }
+  }
+  .contentBox {
+    height: 966px;
+    background: url("~@/assets/images/largeScreen/bigBox-bg.png") no-repeat;
+    background-size: 100% auto;
+    background-position: center bottom;
+    border: 1px solid transparent;
+    ul.contentOne {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      margin: 30px 30px 0;
+      li {
+        width: 886px;
+        height: 665px;
+        background: url("~@/assets/images/largeScreen/largeScreen2-kuang1.png")
+          no-repeat;
+        background-size: 100% auto;
+      }
+    }
+    ul.contentTwo {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      margin: 10px 30px 0;
+      li {
+        width: 588px;
+        height: 720px;
+        background: url("~@/assets/images/largeScreen/largeScreen2-kuang2.png")
+          no-repeat;
+        background-size: 100% auto;
+      }
+    }
+    ul.contentThree {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin: 0px 30px 0;
+      li {
+        width: 891px;
+        height: 355px;
+        background: url("~@/assets/images/largeScreen/largeScreen2-kuang3.png")
+          no-repeat;
+        background-size: 100% auto;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+#app {
+  overflow: auto !important;
+}
+</style>

src/views/platformBusinessData/components/mainBoxFive.vue

@@ -0,0 +1,85 @@
+<template>
+  <li class="mainBox">
+    <div class="title">
+      <span>重点人群</span>
+    </div>
+    <div class="contentBox">
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>帮扶就业困难人员</span></div>
+          <div class="count"><span class="numb">3539</span>(人)</div>
+        </div>
+        <ul>
+          <li>
+            <div class="liTitle">
+              <span>城镇零就业家庭成员</span>
+            </div>
+            <div class="count"><span class="numb">619</span>(人)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>城镇低保家庭成员</span>
+            </div>
+            <div class="count"><span class="numb">597</span>(人)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>残疾人</span>
+            </div>
+            <div class="count"><span class="numb">583</span>(人)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>现役军人配偶</span>
+            </div>
+            <div class="count"><span class="numb">511</span>(人)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>烈属</span>
+            </div>
+            <div class="count"><span class="numb">493</span>(人)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>贫困劳动力</span>
+            </div>
+            <div class="count"><span class="numb">427</span>(人)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>农村低收入劳动力</span>
+            </div>
+            <div class="count"><span class="numb">309</span>(人)</div>
+          </li>
+        </ul>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>高校毕业生</span></div>
+          <div class="count"><span class="numb">57962</span>(人)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>退役军人</span></div>
+          <div class="count"><span class="numb">25173</span>(人)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>长期失业人员</span></div>
+          <div class="count"><span class="numb">5426</span>(人)</div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@import "../index.scss";
+</style>

src/views/platformBusinessData/components/mainBoxFour.vue

@@ -0,0 +1,47 @@
+<template>
+  <li class="mainBox">
+    <div class="title">
+      <span>创业撮合情况</span>
+    </div>
+    <div class="contentBox">
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>上架创业项目</span></div>
+          <div class="count"><span class="numb">73</span>(个)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>撮合成功项目</span></div>
+          <div class="count"><span class="numb">59</span>(个)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>创业导师提供</span></div>
+          <div class="count"><span class="numb">42</span>(个)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>创业孵化企业</span></div>
+          <div class="count"><span class="numb">32</span>(家)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>创业孵化就业人数</span></div>
+          <div class="count"><span class="numb">215</span>(人)</div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@import "../index.scss";
+</style>

src/views/platformBusinessData/components/mainBoxOne.vue

@@ -0,0 +1,81 @@
+<template>
+  <li class="mainBox">
+    <div class="title">
+      <span>全职招聘情况</span>
+    </div>
+    <div class="contentBox">
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>用人单位数</span></div>
+          <div class="count"><span class="numb">34</span>(家)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>发布岗位数</span></div>
+          <div class="count"><span class="numb">138</span>(个)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>招聘热门岗位</span></div>
+          <!-- <div class="count"><span class="numb">230</span>(人)</div> -->
+        </div>
+        <ul>
+          <li>
+            <div class="liTitle">
+              <span class="rankNumb">01</span><span>普工</span>
+            </div>
+            <div class="count"><span class="numb">32</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span class="rankNumb">02</span><span>技工</span>
+            </div>
+            <div class="count"><span class="numb">29</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span class="rankNumb">03</span><span>操作工</span>
+            </div>
+            <div class="count"><span class="numb">17</span>(个)</div>
+          </li>
+        </ul>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>入职热门岗位</span></div>
+          <!-- <div class="count"><span class="numb">230</span>(人)</div> -->
+        </div>
+        <ul>
+          <li>
+            <div class="liTitle">
+              <span class="rankNumb">01</span><span>普工</span>
+            </div>
+            <div class="count"><span class="numb">32</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span class="rankNumb">02</span><span>技工</span>
+            </div>
+            <div class="count"><span class="numb">29</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span class="rankNumb">03</span><span>操作工</span>
+            </div>
+            <div class="count"><span class="numb">17</span>(个)</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@import "../index.scss";
+</style>

src/views/platformBusinessData/components/mainBoxSix.vue

@@ -0,0 +1,106 @@
+<template>
+  <li class="mainBox">
+    <div class="title">
+      <span>技能培训</span>
+    </div>
+    <div class="contentBox">
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>平台培训机构数</span></div>
+          <div class="count"><span class="numb">32</span>(家)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>上架课程</span></div>
+          <div class="count"><span class="numb">143</span>(门)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>技能岗位需求增长</span></div>
+          <div class="count"><span class="numb">63</span>(%)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>培训后就业成功率</span></div>
+          <div class="count"><span class="numb">79</span>(%)</div>
+        </div>
+      </div>
+      <ul class="list">
+        <li>
+          <div class="liTitle">
+            <span>报名人数</span>
+          </div>
+          <div class="count"><span class="numb">2658</span>(人)</div>
+        </li>
+        <li>
+          <div class="liTitle">
+            <span>培训期数</span>
+          </div>
+          <div class="count"><span class="numb">46</span>(期)</div>
+        </li>
+        <li>
+          <div class="liTitle">
+            <span>培训课程数</span>
+          </div>
+          <div class="count"><span class="numb">135</span>(门)</div>
+        </li>
+        <li>
+          <div class="liTitle">
+            <span>培训完结人数</span>
+          </div>
+          <div class="count"><span class="numb">2143</span>(人)</div>
+        </li>
+        <li>
+          <div class="liTitle">
+            <span>发证人数</span>
+          </div>
+          <div class="count"><span class="numb">2019</span>(人)</div>
+        </li>
+      </ul>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+@import "../index.scss";
+ul.list {
+  width: 560px;
+  margin: 0 auto;
+  li {
+    height: 70px;
+    line-height: 70px;
+    display: flex;
+    justify-content: space-between;
+    .liTitle {
+      font-size: 32px;
+      span {
+        background: -webkit-linear-gradient(#ffffff, #75e8ff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 500;
+      }
+      .rankNumb {
+        display: inline-block;
+        padding: 0 10px 0 0;
+      }
+    }
+    .count {
+      line-height: 70px;
+      font-size: 24px;
+      .numb {
+        font-size: 48px;
+        display: inline-block;
+        padding: 0 15px 0 0;
+        text-shadow: 0 0 5px #2ab9d6, 0 0 20px #2ab9d6, 0 0 30px #2ab9d6;
+      }
+    }
+  }
+}
+</style>

src/views/platformBusinessData/components/mainBoxThree.vue

@@ -0,0 +1,47 @@
+<template>
+  <li class="mainBox">
+    <div class="title">
+      <span>实习招聘情况</span>
+    </div>
+    <div class="contentBox">
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>实习合作企业</span></div>
+          <div class="count"><span class="numb">23</span>(家)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>实习合作院校</span></div>
+          <div class="count"><span class="numb">9</span>(家)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>校企联合实习基地</span></div>
+          <div class="count"><span class="numb">13</span>(个)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>定向推送实习岗位</span></div>
+          <div class="count"><span class="numb">58</span>(个)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>实习入职人员</span></div>
+          <div class="count"><span class="numb">324</span>(人)</div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@import "../index.scss";
+</style>

src/views/platformBusinessData/components/mainBoxTwo.vue

@@ -0,0 +1,85 @@
+<template>
+  <li class="mainBox">
+    <div class="title">
+      <span>零工招聘情况</span>
+    </div>
+    <div class="contentBox">
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>零工岗位</span></div>
+          <div class="count"><span class="numb">152</span>(个)</div>
+        </div>
+        <ul>
+          <li>
+            <div class="liTitle">
+              <span>外卖配送员</span>
+            </div>
+            <div class="count"><span class="numb">35</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>快递分拣员</span>
+            </div>
+            <div class="count"><span class="numb">28</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>家政保洁员</span>
+            </div>
+            <div class="count"><span class="numb">22</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>网约车司机</span>
+            </div>
+            <div class="count"><span class="numb">18</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>电商客服（兼职）</span>
+            </div>
+            <div class="count"><span class="numb">15</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>商超理货员</span>
+            </div>
+            <div class="count"><span class="numb">12</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>短视频剪辑师（兼职）</span>
+            </div>
+            <div class="count"><span class="numb">8</span>(个)</div>
+          </li>
+          <li>
+            <div class="liTitle">
+              <span>活动协助员</span>
+            </div>
+            <div class="count"><span class="numb">4</span>(个)</div>
+          </li>
+        </ul>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>零工人才库</span></div>
+          <div class="count"><span class="numb">237</span>(人)</div>
+        </div>
+      </div>
+      <div class="dataBox">
+        <div class="countBox">
+          <div class="countTitle"><span>就业人次</span></div>
+          <div class="count"><span class="numb">524</span>(次)</div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@import "../index.scss";
+</style>

src/views/platformBusinessData/components/topStatistics.vue

@@ -0,0 +1,115 @@
+<template>
+  <ul class="topStatisticsBox">
+    <li
+      v-for="(item, index) in statisticsData"
+      :key="index"
+      :style="{ margin: item.margin }"
+    >
+      <img :src="item.imgURL" :alt="item.title" />
+      <div class="infoBox">
+        <div class="title">
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="count">
+          <span class="numb">{{ item.value }}</span
+          >（{{ item.unit }}）
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import topStatisticsJyfwz from "@/assets/images/largeScreen/topStatistics-jyfwz.png";
+import topStatisticsRzqy from "@/assets/images/largeScreen/topStatistics-rzqy.png";
+import topStatisticsWczpjh from "@/assets/images/largeScreen/topStatistics-wczpjh.png";
+import topStatisticsZhytj from "@/assets/images/largeScreen/topStatistics-zhytj.png";
+import topStatisticsZpgw from "@/assets/images/largeScreen/topStatistics-zpgw.png";
+
+const statisticsData = ref([
+  {
+    title: "招聘岗位",
+    value: "325",
+    imgURL: topStatisticsZpgw,
+    unit: "个",
+    margin: "-326px 0 0 -685px"
+  },
+  {
+    title: "完成招聘计划",
+    value: "312",
+    imgURL: topStatisticsWczpjh,
+    unit: "个",
+    margin: "-467px 0px 0px -228px"
+  },
+  {
+    title: "入住企业",
+    value: "35",
+    imgURL: topStatisticsRzqy,
+    unit: "家",
+    margin: "-232px 0px 0px 306px"
+  },
+  {
+    title: "综合一体机",
+    value: "78",
+    imgURL: topStatisticsZhytj,
+    unit: "个",
+    margin: "-76px 0px 0px -500px"
+  },
+  {
+    title: "就业服务站",
+    value: "18",
+    imgURL: topStatisticsJyfwz,
+    unit: "家",
+    margin: "-48px 0px 0 9px"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+ul.topStatisticsBox {
+  height: 1055px;
+  background: url("~@/assets/images/largeScreen/topStatistics-bg.png") no-repeat
+    center;
+  position: relative;
+  li {
+    position: absolute;
+    width: 450px;
+    height: 190px;
+    top: 50%;
+    left: 50%;
+    img {
+      display: block;
+      width: 190px;
+      height: 190px;
+      float: left;
+    }
+    .infoBox {
+      float: left;
+      padding: 0 0 0 10px;
+      .title {
+        height: 40px;
+        line-height: 40px;
+        margin-top: 36px;
+
+        span {
+          background: -webkit-linear-gradient(#ffffff, #75e8ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 32px;
+          font-weight: 500;
+        }
+      }
+      .count {
+        font-size: 24px;
+        padding: 18px 0 0 0;
+        span.numb {
+          font-size: 64px;
+          display: inline-block;
+          padding: 0 5px 0 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/platformBusinessData/index.scss

@@ -0,0 +1,111 @@
+.allBox {
+  width: 1920px;
+  height: 3240px;
+  margin: 0 auto;
+  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
+  background-size: 100%;
+  position: relative;
+}
+ul.bigBox {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  li.mainBox {
+    width: 600px;
+    height: 1000px;
+    margin: 15px;
+    background: url("~@/assets/images/largeScreen/mainBox-bg.png") no-repeat;
+    background-size: auto 100%;
+    background-position: center bottom;
+    .title {
+      height: 34px;
+      line-height: 34px;
+      background: url("~@/assets/images/largeScreen/mainBox-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;
+      }
+    }
+    .contentBox {
+      height: 966px;
+      border: 1px solid transparent;
+      display: flex;
+      justify-content: space-evenly;
+      flex-direction: column;
+      .dataBox {
+        margin: 0 auto;
+        width: 560px;
+        min-height: 40px;
+        background: url("~@/assets/images/largeScreen/dataBox-line-bg.png")
+          no-repeat;
+        background-position: center bottom;
+        overflow: hidden;
+        padding: 0 0 15px;
+        .countBox {
+          display: flex;
+          justify-content: space-between;
+          height: 85px;
+          background: url("~@/assets/images/largeScreen/tongji3-jjrzs.png")
+            no-repeat left top;
+          .countTitle {
+            line-height: 70px;
+            font-size: 32px;
+            padding: 0 0 0 84px;
+            span {
+              background: -webkit-linear-gradient(#ffffff, #75e8ff);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              font-weight: 500;
+            }
+          }
+          .count {
+            line-height: 70px;
+            font-size: 24px;
+            .numb {
+              font-size: 48px;
+              display: inline-block;
+              padding: 0 15px 0 0;
+              text-shadow: 0 0 5px #2ab9d6, 0 0 20px #2ab9d6, 0 0 30px #2ab9d6;
+            }
+          }
+        }
+        ul {
+          li {
+            height: 70px;
+            line-height: 70px;
+            display: flex;
+            justify-content: space-between;
+            .liTitle {
+              font-size: 32px;
+              span {
+                background: -webkit-linear-gradient(#ffffff, #75e8ff);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                font-weight: 500;
+              }
+              .rankNumb {
+                display: inline-block;
+                padding: 0 10px 0 0;
+              }
+            }
+            .count {
+              line-height: 70px;
+              font-size: 24px;
+              .numb {
+                font-size: 48px;
+                display: inline-block;
+                padding: 0 15px 0 0;
+                text-shadow: 0 0 5px #2ab9d6, 0 0 20px #2ab9d6, 0 0 30px #2ab9d6;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/views/platformBusinessData/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="allBox">
+    <!-- 头部 -->
+    <Head title="兴蜀来了平台业务数据"></Head>
+    <LeftBorder></LeftBorder>
+    <RightBorder></RightBorder>
+    <BottomBorder></BottomBorder>
+    <!-- 顶部统计 -->
+    <TopStatistics></TopStatistics>
+    <!-- 数据统计 -->
+    <ul class="bigBox">
+      <!-- 全职招聘情况 -->
+      <MainBoxOne></MainBoxOne>
+      <!-- 零工招聘情况 -->
+      <MainBoxTwo></MainBoxTwo>
+      <!-- 实习招聘情况 -->
+      <MainBoxThree></MainBoxThree>
+      <!-- 创业撮合情况 -->
+      <MainBoxFour></MainBoxFour>
+      <!-- 重点人群 -->
+      <MainBoxFive></MainBoxFive>
+      <!-- 技能培训 -->
+      <MainBoxSix></MainBoxSix>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Head from "../../components/largeScreen/headHome.vue";
+import LeftBorder from "../../components/largeScreen/leftBorder.vue";
+import RightBorder from "../../components/largeScreen/rightBorder.vue";
+import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
+import TopStatistics from "./components/topStatistics";
+import MainBoxOne from "./components/mainBoxOne";
+import MainBoxTwo from "./components/mainBoxTwo";
+import MainBoxThree from "./components/mainBoxThree";
+import MainBoxFour from "./components/mainBoxFour";
+import MainBoxFive from "./components/mainBoxFive";
+import MainBoxSix from "./components/mainBoxSix";
+
+// 定义标题名称
+const title = "三级劳务体系⼈员数据";
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
+<style lang="scss">
+#app {
+  overflow: auto !important;
+}
+</style>

src/views/threeLaborService/components/companyProfile.vue

@@ -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>

src/views/threeLaborService/components/map.vue

@@ -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>

src/views/threeLaborService/components/solveEmployment-bhqs.vue

@@ -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>

src/views/threeLaborService/components/solveEmployment-gwxqdb.vue

@@ -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>

src/views/threeLaborService/components/solveEmployment-gwxqtj.vue

@@ -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>

src/views/threeLaborService/components/solveEmployment-rcgy.vue

@@ -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>

src/views/threeLaborService/components/solveEmployment.vue

@@ -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>

src/views/threeLaborService/components/statistic.vue

@@ -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>

src/views/threeLaborService/index.vue

@@ -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>