兴蜀大屏调整

src/views/recruitment/layout/centerModel.vue

@@ -16,7 +16,7 @@
     </div>
     <div
       class="content"
-      v-show="isactive != 0 && isactive != 4 && isactive != 5"
+      v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3"
     >
       <div class="num">81.1万</div>
       <div class="label">人口总数</div>
@@ -49,7 +49,7 @@
       <div class="barBox" ref="enterpriseTwoRef"></div>
     </div>
     <!-- </transition> -->
-    <div class="hjrkDialogBox" v-show="isactive == 5">
+    <div class="hjrkDialogBox" v-show="isactive == 1">
       <div class="titleBox">
         <div class="title">高中端人才</div>
         <div class="close" @click="isactive = -1"></div>
@@ -69,7 +69,7 @@
         </li>
       </ul>
     </div>
-    <div class="hjrkDialogBox" v-show="isactive == 4">
+    <div class="hjrkDialogBox" v-show="isactive == 3">
       <div class="titleBox">
         <div class="title">新增就业群体</div>
         <div class="close" @click="isactive = -1"></div>
@@ -106,6 +106,38 @@
         </ul>
       </div>
     </div>
+    <div class="hjrkDialogBox" v-show="isactive == 2">
+      <div class="titleBox">
+        <div class="title">高校毕业未就业情况</div>
+        <div class="close" @click="isactive = -1"></div>
+      </div>
+      <ul class="tabsBox">
+        <!-- <li
+            v-for="(item, index) in tabsDate.tabs"
+            :key="index"
+            :class="tabsActive == index ? 'active' : ''"
+            @click="tabsActive = index"
+          >
+            {{ item }}
+          </li> -->
+        <li
+          v-for="(item, index) in tabsDate2.tabs"
+          :key="index"
+          :class="tabsActive == index ? 'active' : ''"
+          @click="
+            tabsDate2.activeIndex = index;
+            tabsActive = index;
+          "
+        >
+          {{ item }}
+        </li>
+      </ul>
+      <Xueli v-if="tabsDate2.activeIndex == 0"></Xueli>
+      <Zhuanye v-if="tabsDate2.activeIndex == 1"></Zhuanye>
+      <Xingbie v-if="tabsDate2.activeIndex == 2"></Xingbie>
+      <Juzhudi v-if="tabsDate2.activeIndex == 3"></Juzhudi>
+      <Kunnan v-if="tabsDate2.activeIndex == 4"></Kunnan>
+    </div>
   </div>
 </template>
 
@@ -114,6 +146,11 @@ import { ref, reactive, onMounted } 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";
+import Xueli from "../components/jyknryzjy/xueli.vue";
+import Zhuanye from "../components/jyknryzjy/zhuanye.vue";
+import Xingbie from "../components/jyknryzjy/xingbie.vue";
+import Juzhudi from "../components/jyknryzjy/juzhudi.vue";
+import Kunnan from "../components/jyknryzjy/kunnan.vue";
 const isactive = ref(-1);
 const tabsActive = ref(0);
 const dialogTitle = ref("户籍人口");
@@ -131,33 +168,37 @@ const modelContentList = ref([
     label: "户籍人口"
   },
   {
-    num: "8.91万",
-    label: "流动人口"
+    num: "2.2万",
+    label: "高中端人才"
   },
   {
-    num: "约27万",
-    label: "就业人群"
-  },
-  // {
-  //   num: "13000",
-  //   label: "待就业人群"
-  // },
-  {
-    num: "10.06万",
-    label: "灵活就业群体"
+    num: "655",
+    label: "高校毕业未就业"
   },
   {
     num: "0.54万",
     label: "新增就业群体"
   },
   {
-    num: "2.2万",
-    label: "高中端人才"
+    num: "10.06万",
+    label: "灵活就业群体"
   },
   {
-    num: "0.76万",
+    num: "4608",
     label: "领金人员"
   }
+  // {
+  //   num: "8.91万",
+  //   label: "流动人口"
+  // },
+  // {
+  //   num: "约27万",
+  //   label: "就业人群"
+  // },
+  // {
+  //   num: "13000",
+  //   label: "待就业人群"
+  // },
 ]);
 const statisticData = ref([
   {
@@ -204,7 +245,10 @@ const tabsDate = reactive({
   ],
   activeIndex: 0
 });
-
+const tabsDate2 = reactive({
+  tabs: ["学历", "专业", "性别", "居住地址", "困难大学生"],
+  activeIndex: 0
+});
 import * as echarts from "echarts";
 const enterpriseTwoRef = ref(null);
 const option = {
@@ -232,7 +276,10 @@ const option = {
         color: "#CBF2FA" // 文字颜色
       }
     },
-
+    axisLabel: {
+      fontSize: 22, // 设置 x 轴文字大小
+      color: "#CBF2FA" // 可以同时设置文字颜色
+    },
     type: "category",
     data: ["大专及以上", "高中(含中专)", "初中", "小学"]
   },
@@ -250,6 +297,10 @@ const option = {
         color: "#CBF2FA" // 文字颜色
       }
     },
+    axisLabel: {
+      fontSize: 20, // 设置 x 轴文字大小
+      color: "#CBF2FA" // 可以同时设置文字颜色
+    },
     type: "value"
   },
   series: [
@@ -263,7 +314,8 @@ const option = {
       label: {
         show: true,
         position: "top",
-        color: "#30DCFF"
+        color: "#30DCFF",
+        fontSize: 22
       },
       itemStyle: {
         //渐变色
@@ -391,7 +443,7 @@ onMounted(() => {
       width: 10.729vw;
       height: 6.667vw;
       padding: 0.625vw 0;
-      margin: 0 1.1vw 1.2vw;
+      margin: 0 1.5vw 1.2vw;
       cursor: pointer;
       .num {
         font-family: PingFang SC, PingFang SC;