gx

src/router/index.js

@@ -53,7 +53,7 @@ const router = createRouter({
         {
           name: '首页地图',
           path: '/home/index/map',
-          component: () => import('../view/sy_mapcopy.vue'),
+          component: () => import('../view/sy_map.vue'),
         },
         {
           name: '首页表格',

src/view/analyze.vue

@@ -72,7 +72,7 @@
             <div
               class="minPieImg"
               style="letter-spacing: 1px"
-              @click="showEchartTy('集聚类型分布')"
+              @click="showEchartTy('集聚数据总览')"
             >
               集聚类型分布
             </div>
@@ -90,7 +90,7 @@
           <div class="minPieImg2">就业培训</div>
           <jypx v-if="showEchart"></jypx>
           <div class="jypx_right">
-            <div class="jypx_right_item" v-for="item in jypxList">
+            <div class="jypx_right_item" v-for="item in jypxList" @click="showPx(item.name)">
               <img :src="item.img" alt="" />
               <div class="jypx_right_item_right">
                 <div class="jypx_name">{{ item.name }}</div>
@@ -183,7 +183,7 @@
     <DialogElderly
       :dialogShowElderly="dialogShowElderly"
       :dataElderly="dataElderly"
-      @close="close1"
+      @close="close"
     >
     </DialogElderly>
     <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
@@ -191,20 +191,20 @@
     <DialogEcTy
       :dialogShowEc="dialogShowEcTy"
       :title="dataEc.title"
+      :showXq='false'
       @close="close"
     >
       <template #echart>
         <dialog_jjlxfb
-          :list="nlfb.list1"
+         
-          :list2="nlfb.list2"
+          @shuju="jsSj"
-          :list3="nlfb.list3"
-          :year="nlfb.year"
         ></dialog_jjlxfb>
       </template>
     </DialogEcTy>
     <DialogEcTy
       :dialogShowEc="dialogShowEcTy1"
       :title="dataEc.title"
+       :showXq='true'
       @close="close"
     >
       <template #echart>
@@ -216,6 +216,17 @@
         ></dialog_nlfb>
       </template>
     </DialogEcTy>
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :pagination="pagination"
+      :showXq='false'
+      @close="closeJj"
+      @handle="handlePagination"
+    >
+    </Dialog>
   </div>
 </template>
 
@@ -228,6 +239,7 @@ import {
   onBeforeUnmount,
   computed,
 } from "vue";
+import Dialog from "./dialog/dialog.vue";
 import DialogEnrol from "./dialog/dialogEnrol.vue";
 import DialogElderly from "./dialog/diaLogElderlyData.vue";
 import DialogMap from "./dialog/dialogMap.vue";
@@ -253,7 +265,6 @@ import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
 import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.png";
 import jypx1 from "@/assets/images/sjfx/pxrc.png";
 import jypx2 from "@/assets/images/sjfx/gygws.png";
-
 const showR = ref(false); //loading
 // 入学分析数据
 const dialogShowEnrol = ref(false);
@@ -261,6 +272,7 @@ const dialogShowElderly = ref(false);
 const dialogShowMap = ref(false);
 const dialogShowEcTy = ref(false);
 const dialogShowEcTy1 = ref(false);
+const dialogShow = ref(false);
 const mapTitle = ref("");
 const dataTab = reactive({
   url: "",
@@ -507,11 +519,55 @@ const dataEc = reactive({
   title: "",
 });
 const nlfb = reactive({
-  year: [2022, 2023, 2024, 2025, 2026,2027],
+  year: [2022, 2023, 2024, 2025, 2026, 2027],
-  list1: [709, 3424, 2064, 0, 0,0],
+  list1: [709, 3424, 2064, 2980, 1790, 3100],
-  list2: [1548, 5895, 2753, 0, 0,0],
+  list2: [1548, 5895, 2753, 4602, 2030, 3900],
-  list3: [180, 930, 632, 0, 0,0],
+  list3: [180, 930, 632, 780, 520, 600],
 });
+//表格column列表
+const columns = reactive({
+  聚集数据: {
+    column: [
+      {
+        label: "姓名",
+        property: "name",
+      },
+      {
+        label: "出生日期",
+        property: "date",
+      },
+      {
+        label: "性别",
+        property: "sex",
+      },
+      {
+        label: "迁出地址",
+        property: "qcaddress",
+      },
+      {
+        label: "地址",
+        property: "address",
+      },
+    ],
+  },
+  培训: {
+    column: [
+      {
+        label: "姓名",
+        property: "name",
+      },
+      {
+        label: "培训机构名称",
+        property: "mc",
+      },
+      {
+        label: "培训项目",
+        property: "xm",
+      },
+    ],
+  },
+});
+
 const showEnrol = () => {
   dialogShowEnrol.value = true;
 };
@@ -520,13 +576,15 @@ const close = () => {
   dialogShowMap.value = false;
   dialogShowEcTy.value = false;
   dialogShowEcTy1.value = false;
+  dialogShowElderly.value = false;
 };
+const closeJj=()=>{
+  dialogShow.value = false;
+  pagination.currentPage=1;
+}
 const showEnrol1 = () => {
   dialogShowElderly.value = true;
 };
-const close1 = () => {
-  dialogShowElderly.value = false;
-};
 const showEchartTy = (name) => {
   dataEc.title = name;
   if (name == "年龄分布") {
@@ -535,6 +593,43 @@ const showEchartTy = (name) => {
     dialogShowEcTy.value = true;
   }
 };
+//---------表格弹框-------
+const tableType = reactive({
+  url: "",
+  title: "",
+  columns: [],
+  data: [],
+});
+//转入转出
+const jsSj = (name, index) => {
+  if (index == 0 || index == 2) {
+    tableType.title = `${name}转入人数`;
+  } else {
+    tableType.title = `${name}转出人数`;
+  }
+  tableType.columns=columns["聚集数据"].column;
+   dialogShow.value = true;
+};
+//培训+公益岗位数
+const showPx =(name)=>{
+  if(name=='培训人次'){
+    tableType.title = `培训详情`;
+    tableType.columns=columns["培训"].column;
+    dialogShow.value = true;
+  }else{
+
+  }
+}
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+};
+//---------表格弹框-------
 //数据切换
 const tab_choose = ref([
   {
@@ -1331,6 +1426,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
   margin-left: 35px;
   .jypx_right_item {
+    cursor: pointer;
     display: flex;
     align-items: center;
     img {

src/view/dialog/dialog.vue

@@ -10,11 +10,7 @@
     >
       <template #header="{ close, titleId, titleClass }">
         <div class="my-header">
-          <el-icon
+          <el-icon size="26" color="#fff" @click="closeDialog">
-            size="26"
-            color="#fff"
-            @click="closeDialog"
-          >
             <CircleCloseFilled />
           </el-icon>
         </div>
@@ -29,7 +25,8 @@
                 alt=""
                 style="margin-right: 10px"
               />
-              <div class="name">{{ title }}详情</div>
+              <div class="name" v-if="showXq">{{ title }}详情</div>
+              <div class="name" v-else>{{ title }}</div>
               <img
                 src="@/assets/images/table_r.png"
                 alt=""
@@ -142,6 +139,12 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  showXq: {
+    type: Boolean,
+    default: () => {
+      return true;
+    },
+  },
 });
 const emit = defineEmits(["close", "handle"]);
 

src/view/dialog/dialogEcTy.vue

@@ -11,11 +11,7 @@
     >
       <template #header="{ close, titleId, titleClass }">
         <div class="my-header">
-          <el-icon
+          <el-icon size="26" color="#fff" @click="closeDialog">
-            size="26"
-            color="#fff"
-            @click="closeDialog"
-          >
             <CircleCloseFilled />
           </el-icon>
         </div>
@@ -30,7 +26,8 @@
                 alt=""
                 style="margin-right: 10px"
               />
-              <div class="name">{{ title }}详情</div>
+              <div class="name" v-if="showXq">{{ title }}详情</div>
+              <div class="name" v-else>{{ title }}</div>
               <img
                 src="@/assets/images/table_r.png"
                 alt=""
@@ -77,6 +74,12 @@ const props = defineProps({
       return "";
     },
   },
+  showXq: {
+    type: Boolean,
+    default: () => {
+      return true;
+    },
+  },
 });
 const emit = defineEmits(["close"]);
 
@@ -107,7 +110,6 @@ const closeDialog = () => {
   dialogShowEc.value = false;
   emit("close");
 };
-
 </script>
 <style lang="scss" scoped>
 :deep(.el-dialog) {

src/view/echart_analyze/dialog_jjlxfb.vue

@@ -683,7 +683,7 @@ const setChart = () => {
   var myChart = echarts.init(chart.value);
   myChart.setOption(data.option);
   myChart.on("click", function (params) {
-    emit("shuju", params.name);
+    emit("shuju", params.name,params.seriesIndex);
   });
 };
 const getMaxCeilingValue = (arr) => {

src/view/echart_analyze/dialog_nlfb.vue

@@ -60,7 +60,7 @@ const getOption = () => {
     grid: {
       top: "15%",
       left: "1%",
-      right: "10%",
+      right: "3%",
       bottom: "3%",
       containLabel: true,
     },

src/view/sy.vue

@@ -594,16 +594,6 @@
       @close="close"
       @handle="handlePagination"
     >
-      <!-- <template #pxkssj="{ currentCol, currentData }">
-        <div>{{ currentData.pxkssj }}/{{ currentData.pxjssj }}</div>
-      </template> -->
-      <!-- <template #pxjssj="{ currentCol, currentData }">
-        <div>
-          {{ currentData.pxjssj.slice(0, 4) }}-{{
-            currentData.pxjssj.slice(4, 6)
-          }}-{{ currentData.pxjssj.slice(6, 8) }}
-        </div>
-      </template> -->
     </Dialog>
     <DialogEc
       :dialogShowEc="dialogShowEc"