推送

2025-10-23 14:01:59 +08:00
parent 314b2f566d
commit f63bb358d4
5 changed files with 156 additions and 80 deletions
--- a/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
@ -3,34 +3,54 @@
 </template>

 <script setup>
-// Vue 3 Composition API 的 setup 语法糖
-// 在这里直接编写响应式数据和方法，无需返回
-import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
+
 const enterpriseTwoRef = ref(null);
-let chart = null
-const option = {
-  // 添加标题
+let chart = null;
+
+// 响应式设计稿配置
+const designConfig = {
+  designWidth: 1920,
+  designHeight: 1080
+};
+
+// 计算实际的像素值（基于设计稿比例）
+function calcResponsivePX(pxValue) {
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  return (pxValue / designConfig.designWidth) * screenWidth;
+}
+
+// 计算 vw 单位值（真正的 vw）
+function calcVW(pxValue) {
+  return (pxValue / designConfig.designWidth) * 100;
+}
+
+// 计算 vh 单位值
+function calcVH(pxValue) {
+  return (pxValue / designConfig.designHeight) * 100;
+}
+
+// 图表配置
+const getChartOption = () => ({
  title: {
    text: '重点保供企业分布',
    left: 'center',
    top: '5%',
    textStyle: {
      color: '#30DCFF',
-      fontSize: 16,
+      fontSize: calcResponsivePX(16),
      fontWeight: 'normal'
    }
  },
-  // 设置图形位置
  grid: {
-    top: '20%',
-    left: '15%',
-    right: '5%',
-    bottom: '25%'
+    top: `${calcVH(210)}%`, // 使用 vh 确保垂直方向也响应式
+    left: `${calcVW(130)}%`,
+    right: `${calcVW(120)}%`,
+    bottom: `${calcVH(170)}%`
  },
  xAxis: {
    show: true,
-
    axisTick: {
      show: true,
      lineStyle: {
@ -38,17 +58,19 @@ const option = {
      }
    },
    axisLabel: {
-      fontSize: 14,
+      fontSize: calcResponsivePX(12),
      color: '#CBF2FA',
      rotate: 0,
-      margin: 15
+      show: true,
+      interval: 0,
+      hideOverlap: false,
+      margin: calcResponsivePX(14)
    },
    type: "category",
    data: ["第一产业", "第二产业", "第三产业"]
  },
  yAxis: {
-    interval: 50, // 设置刻度间隔
-    //显示网格线
+    interval: 50,
    splitLine: {
      show: true,
      lineStyle: {
@ -73,49 +95,54 @@ const option = {
      name: "企业数",
      type: "bar",
      showBackground: false,
-      barWidth: 25,
+      barWidth: calcResponsivePX(25), // 柱状图宽度也要响应式
      data: [6, 581, 41],
-      // 设置柱状图的数值
      label: {
        show: true,
        position: "top",
        color: '#30DCFF',
-        fontSize: 14,
+        fontSize: calcResponsivePX(14),
        formatter: function(params) {
          return params.value + '家';
        }
      },
      itemStyle: {
-        //纯色
        color: '#30DCFF'
      }
    }
  ]
-};
+});

 // 处理图表重绘
-function handleChartResize() {
+const handleChartResize = () => {
  if (chart) {
-    // 先重置图表尺寸
-    chart.resize()
-
-    chart.setOption(option, { notMerge: false, lazyUpdate: true })
+    chart.resize();
+    // 重新设置选项以更新所有响应式尺寸
+    chart.setOption(getChartOption(), true); // true 表示不合并，完全替换
  }
-}
+};
+
+// 初始化图表
+const initChart = () => {
+  if (!enterpriseTwoRef.value) return;
+
+  chart = echarts.init(enterpriseTwoRef.value);
+  chart.setOption(getChartOption());
+};

 // 生命周期钩子
 onMounted(() => {
-  if (enterpriseTwoRef.value) {
-    chart = echarts.init(enterpriseTwoRef.value);
-    // 设置option
-    chart.setOption(option);
-  }
-  window.addEventListener('resize', handleChartResize)
+  nextTick(() => {
+    initChart();
+  });
+  window.addEventListener('resize', handleChartResize);
 });

 onUnmounted(() => {
  window.removeEventListener('resize', handleChartResize);
-})
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+});
 </script>
-
-<style lang="scss" scoped></style>
--- a/src/views/recruitment/card/LaborSystemTwo.vue
+++ b/src/views/recruitment/card/LaborSystemTwo.vue
@ -6,19 +6,35 @@
 </template>

 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
-// 引入Echarts
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import 'echarts-gl';
-// 引入崇州市地图json数据
+import { debounce } from 'lodash';
+
+// 引入地图数据
 import sichuanJSON from "@/assets/json/sichuan.json";
-// 引入本地撒点图片
 import pointImage from "@/assets/images/recruitment/map-point1.png";
-// 获取地图DOM元素
-let map = ref();
+
+// DOM 引用
+const map = ref();
 let myMap = null;
-// 注册崇州地图
+
+// 注册地图
 echarts.registerMap("sichuan", sichuanJSON);
+
+// 响应式设计配置
+const designConfig = {
+  designWidth: 1920,
+  designHeight: 1080
+};
+
+// 计算响应式尺寸
+const calcResponsivePX = (pxValue) => {
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth;
+  return (pxValue / designConfig.designWidth) * screenWidth;
+};
+
+// 初始点位数据
 const initialPoints = [
  { name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
  { name: "雅安",   value: [103.009, 29.988, 0], count: 0 },
@ -35,11 +51,12 @@ const initialPoints = [
  { name: "达州",   value: [107.467, 31.209, 0], count: 0 },
  { name: "南充",   value: [106.110, 30.837, 0], count: 0 }
 ];
-// 地图参数设置
-let option = {
+
+// 获取动态配置
+const getChartOption = () => ({
  tooltip: {
    trigger: "item",
-    formatter: function (params) {
+    formatter: (params) => {
      if (params.seriesType === "scatter3D") {
        return `${params.name}<br/>合作社数量：${params.data.count || 0}`;
      }
@ -55,7 +72,7 @@ let option = {
    label: {
      show: true,
      color: "#CBF2FA",
-      fontSize: 12,
+      fontSize: calcResponsivePX(10),
      fontWeight: "bold"
    },
    itemStyle: {
@ -73,9 +90,19 @@ let option = {
      ambient: { intensity: 0.35 }
    },
    shading: "lambert",
-    viewControl: { distance: 110, alpha: 45, beta: 10 },
+    viewControl: {
+      distance: 110,
+      alpha: 45,
+      beta: 10,
+    },
    groundPlane: { show: false },
-    postEffect: { enable: true, bloom: { enable: true, bloomIntensity: 0.25 } }
+    postEffect: {
+      enable: true,
+      bloom: {
+        enable: true,
+        bloomIntensity: 0.25
+      }
+    }
  },
  series: [
      {
@ -88,35 +115,54 @@ let option = {
          count: p.count
        })),
        symbol: "triangle",
-        symbolSize: 12,
+        symbolSize: calcResponsivePX(12),
        itemStyle: { color: "#FFBE34" },
        label: { show: false }
      }
    ]
-};
+});

-// 处理图表重绘
-function handleChartResize() {
+// 处理图表重绘（防抖优化）
+const handleChartResize = debounce(() => {
  if (myMap) {
-    // 先重置图表尺寸
-    myMap.resize()
-
-    myMap.setOption(option, { notMerge: false, lazyUpdate: true })
+    myMap.resize();
+    // 重新设置配置以更新响应式尺寸
+    myMap.setOption(getChartOption(), true);
  }
-}
+}, 300);
+
+// 初始化图表
+const initChart = () => {
+  if (!map.value) return;
+
+  myMap = echarts.init(map.value);
+  myMap.setOption(getChartOption());
+
+  // 添加点击事件（可选）
+  myMap.on('click', (params) => {
+    if (params.componentType === 'series' && params.seriesType === 'scatter3D') {
+      console.log('点击了城市:', params.name);
+      // 可以在这里添加点击后的业务逻辑
+    }
+  });
+};

 // 生命周期钩子
 onMounted(() => {
-  myMap = echarts.init(map.value);
-  // 设置配置项
-  myMap.setOption(option);
+  nextTick(() => {
+    initChart();
+  });

-  window.addEventListener('resize', handleChartResize)
+  window.addEventListener('resize', handleChartResize);
 });

 onUnmounted(() => {
  window.removeEventListener('resize', handleChartResize);
-})
+  if (myMap) {
+    myMap.dispose();
+    myMap = null;
+  }
+});
 </script>

 <style lang="scss" scoped>
--- a/src/views/recruitment/index.vue
+++ b/src/views/recruitment/index.vue
@ -79,6 +79,9 @@
        :type1="cardThreeInfo.type1"
        :type2="cardThreeInfo.type2"
      >
+        <template v-slot:header>
+          <div class="header_bg" style="margin-top:1vw">近2个月保供比亚迪入职人员分析</div>
+        </template>
      <ListView/>


--- a/src/views/recruitment/layout/centerModel.vue
+++ b/src/views/recruitment/layout/centerModel.vue
@ -281,7 +281,7 @@ const modelSets = {
     { num: "628个", label: "服务企业" },
     { num: "36所", label: "合作学校" },
     { num: "19个", label: "合作区县" },
-     { num: "17期", label: "培训课程" },
+     { num: "9000+", label: "培训人次" },
     { num: "870人", label: "领证人数" }
   ]
 };
@ -308,19 +308,19 @@ const statisticData = ref([
  {
    imgURL: tongjiPxjg,
    title: "博士",
-    count: "133",
+    count: "40",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "硕士",
-    count: "1012",
+    count: "1213",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "本科",
-    count: "20792",
+    count: "21788",
    unit: "人"
  }
 ]);