diff --git a/src/assets/images/hygiene/ylbx_ybsyje.png b/src/assets/images/hygiene/ylbx_ybsyje.png
new file mode 100644
index 0000000..2cdb666
Binary files /dev/null and b/src/assets/images/hygiene/ylbx_ybsyje.png differ
diff --git a/src/assets/images/hygiene/ylbx_ylbxffrc.png b/src/assets/images/hygiene/ylbx_ylbxffrc.png
new file mode 100644
index 0000000..1689fe5
Binary files /dev/null and b/src/assets/images/hygiene/ylbx_ylbxffrc.png differ
diff --git a/src/assets/images/yl/gllrbt_btje.png b/src/assets/images/yl/gllrbt_btje.png
new file mode 100644
index 0000000..bb9fa3e
Binary files /dev/null and b/src/assets/images/yl/gllrbt_btje.png differ
diff --git a/src/assets/images/yl/gllrbt_btrc.png b/src/assets/images/yl/gllrbt_btrc.png
new file mode 100644
index 0000000..d34e7e2
Binary files /dev/null and b/src/assets/images/yl/gllrbt_btrc.png differ
diff --git a/src/assets/images/yl/tkdb_bzje.png b/src/assets/images/yl/tkdb_bzje.png
new file mode 100644
index 0000000..a68e25e
Binary files /dev/null and b/src/assets/images/yl/tkdb_bzje.png differ
diff --git a/src/assets/images/yl/tkdb_ffrc.png b/src/assets/images/yl/tkdb_ffrc.png
new file mode 100644
index 0000000..d28e77e
Binary files /dev/null and b/src/assets/images/yl/tkdb_ffrc.png differ
diff --git a/src/assets/images/yl/ylbx_ylbxffrc.png b/src/assets/images/yl/ylbx_ylbxffrc.png
new file mode 100644
index 0000000..73e9ef5
Binary files /dev/null and b/src/assets/images/yl/ylbx_ylbxffrc.png differ
diff --git a/src/assets/images/yl/ylbx_ylbxje.png b/src/assets/images/yl/ylbx_ylbxje.png
new file mode 100644
index 0000000..9679874
Binary files /dev/null and b/src/assets/images/yl/ylbx_ylbxje.png differ
diff --git a/src/components/header.vue b/src/components/header.vue
index f7f539c..635e565 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -131,18 +131,14 @@ const data = reactive({
     },
   ],
   urlLeft: [
-    {
-      name: "评估模型",
-      url: "/home/index/table",
-    },
-    {
-      name: "要素一张图",
-      url: "/home/index/map",
-    },
     {
       name: "总体概览",
       url: "/home/index",
     },
+    {
+      name: "评估模型",
+      url: "/home/index/table",
+    },
     // {
     //   name: "养老",
     //   url: "/home/yl",
@@ -159,6 +155,10 @@ const data = reactive({
     //   name: "救助",
     //   url: "/home/work",
     // },
+    {
+      name: "要素一张图",
+      url: "/home/index/map",
+    },
     {
       name: "智能分析",
       url: "/home/analyze",
diff --git a/src/view/analyze.vue b/src/view/analyze.vue
index 22270e0..7473a32 100644
--- a/src/view/analyze.vue
+++ b/src/view/analyze.vue
@@ -507,10 +507,10 @@ const dataEc = reactive({
   title: "",
 });
 const nlfb = reactive({
-  year: [2022, 2023, 2024, 2025, 2026],
-  list1: [0, 1000, 500, 0, 0],
-  list2: [0, 2000, 1000, 0, 0],
-  list3: [0, 3000, 1500, 0, 0],
+  year: [2022, 2023, 2024, 2025, 2026,2027],
+  list1: [0, 1000, 500, 0, 0,0],
+  list2: [0, 2000, 1000, 0, 0,0],
+  list3: [0, 3000, 1500, 0, 0,0],
 });
 const showEnrol = () => {
   dialogShowEnrol.value = true;
diff --git a/src/view/dialog/diaLogElderlyData.vue b/src/view/dialog/diaLogElderlyData.vue
index e98093c..432d8f6 100644
--- a/src/view/dialog/diaLogElderlyData.vue
+++ b/src/view/dialog/diaLogElderlyData.vue
@@ -188,7 +188,7 @@ const closeDialog = () => {
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;
   --el-dialog-width: 55% !important;
-  --el-dialog-margin-top: 11vh;
+  --el-dialog-margin-top: 14vh;
 }
 
 .my-header {
diff --git a/src/view/dialog/dialogEnrol.vue b/src/view/dialog/dialogEnrol.vue
index de369a8..c97ab70 100644
--- a/src/view/dialog/dialogEnrol.vue
+++ b/src/view/dialog/dialogEnrol.vue
@@ -240,7 +240,7 @@ const selectChange1 = (e) => {
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;
   --el-dialog-width: 76% !important;
-  --el-dialog-margin-top: 11vh;
+  --el-dialog-margin-top: 14vh;
   // --el-dialog-margin-bottom: 0px !important;
   margin-bottom: 0px !important;
 }
diff --git a/src/view/dialog/dialogMapDp.vue b/src/view/dialog/dialogMapDp.vue
index bb01be5..179dcea 100644
--- a/src/view/dialog/dialogMapDp.vue
+++ b/src/view/dialog/dialogMapDp.vue
@@ -152,7 +152,7 @@ const handleRowClick = (row, column, event) => {
   console.log(row);
   router.push({
     path: `/home/index/person`,
-    query: {nm: row.nm, identNo: row.identNo },
+    query: {nm: row.nm, identNo: row.identNo,type:'map'},
   });
 };
 // 详情弹框
diff --git a/src/view/echart_analyze/dialog_jjlxfb.vue b/src/view/echart_analyze/dialog_jjlxfb.vue
index 9097d32..9015039 100644
--- a/src/view/echart_analyze/dialog_jjlxfb.vue
+++ b/src/view/echart_analyze/dialog_jjlxfb.vue
@@ -35,31 +35,38 @@ const colors = [
   },
 ];
 const maxList = ref([
-  190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190,
+  18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000,
+  18000, 18000, 18000, 18000,
 ]);
 // const valueList = [20, 53, 47, 65, 29, 11, 10];
 const data = reactive({
   list: [],
   option: {},
-  Max: 200,
-  valueList: [20, 53, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
-  valueList2: [120, 153, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
+  Max: 20000,
+  valueList: [
+    4504, 16086, 6130, 2844, 4967, 179, 1685, 5010, 633, 569, 219, 5152, 40,
+    631, 536,
+  ],
+  valueList2: [
+    1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552, 2651, 3468, 5078, 1944,
+    1959, 4593, 3823,
+  ],
   xxname: [
+    "龙洲街道",
     "东华街道",
-    "大街乡",
-    "塔石镇",
+    "湖镇镇",
     "小南海镇",
-    "模环乡",
+    "溪口镇",
     "横山镇",
-    "沐尘畲族乡",
-    "石佛乡",
+    "塔石镇",
+    "詹家镇",
     "罗家乡",
     "庙下乡",
-    "溪口镇",
+    "沐尘畲族乡",
+    "模环乡",
+    "石佛乡",
     "社阳乡",
-    "詹家镇",
-    "龙洲街道",
-    "湖镇镇",
+    "大街乡",
   ],
 });
 // 注册5个面图形:左侧、前面、右面、上面、下面
@@ -294,7 +301,7 @@ const getOption = () => {
     },
     tooltip: {
       trigger: "axis",
-      //   formatter: "{b0}:{c1}",
+        formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
     },
     grid: {
       left: 0,
@@ -630,6 +637,45 @@ const getOption = () => {
         },
         data: data.valueList2,
       },
+      //顶部字体
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: data.valueList.map((item) => parseInt(item) + 5),
+        barWidth: 30,
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: data.valueList2.map((item) => parseInt(item) + 5),
+        barWidth: 20,
+      },
     ],
   };
 };
diff --git a/src/view/echarts_yl/table_pie.vue b/src/view/echarts_yl/table_pie.vue
new file mode 100644
index 0000000..40b4b0e
--- /dev/null
+++ b/src/view/echarts_yl/table_pie.vue
@@ -0,0 +1,272 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 260px"></div>
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, defineProps, ref, nextTick } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const data = reactive({
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+});
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
+    },
+    legend: {
+      data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
+      top: "8%",
+      right: "11%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        data: data.year,
+      },
+      {
+        axisTick: false,
+        type: "category",
+        data: data.year,
+        axisLabel: {
+          show: false,
+        },
+      },
+    ],
+
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+      },
+      {
+        type: "value",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: "solid",
+            color: "rgb(221, 242, 255,0.1)",
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            type: "dotted",
+          },
+        },
+        axisLabel: {
+          show: false,
+          fontSize: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+    series: [
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list1,
+        symbol: "diamond",
+        symbolOffset: ["-60%", "-50%"],
+        symbolSize: [16, 8],
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(142, 187, 255, 1)",
+        },
+      },
+      {
+        z: 1,
+        name: "职工养老保险发放人次",
+        type: "bar",
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        data: data.list1,
+        barWidth: "18%",
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+              { offset: 1, color: "rgba(142, 187, 255, .5)" },
+            ],
+          },
+        },
+        // itemStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: "rgba(142, 187, 255, 1)",
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: "rgba(142, 187, 255, 0.20)",
+        //     },
+        //   ]),
+        // },
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+      },
+      {
+        z: 2,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list2,
+        symbol: "diamond",
+        symbolOffset: ["62%", "-50%"],
+        symbolSize: [16, 8],
+        itemStyle: {
+          borderColor: "#32ffee",
+          color: "rgba(23, 237, 255, 1)",
+        },
+      },
+      {
+        name: "城乡养老保险发放人次",
+        type: "bar",
+        data: data.list2,
+        // barGap: "-50%",
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        barWidth: "18%",
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+              { offset: 1, color: "rgba(23, 237, 255, .5)" },
+            ],
+          },
+        },
+        // itemStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: "rgba(23, 237, 255, 1)",
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: "rgba(23, 237, 255, 0.20)",
+        //     },
+        //   ]),
+        // },
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: data.year.map(() => 100),
+        barWidth: 50,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index cc792e1..2ce0f53 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -119,20 +119,20 @@
           </div>
         </div>
         <div class="center_top">
-          <div class="item">
-            <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
-            <div class="right">
-              <div class="right_top font">门急诊人次</div>
-              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
-              <div class="right_bottom">{{ data.mz.mjzrc }}</div>
+          <div class="item5">
+            <img src="@/assets/images/hygiene/mjzrc.png" class="left5" />
+            <div class="right5">
+              <div class="right5_top font">门急诊人次</div>
+              <img src="@/assets/images/hygiene/jt.png" class="right5_center" />
+              <div class="right5_bottom">{{ data.mz.mjzrc }}</div>
             </div>
           </div>
-          <div class="item">
-            <img src="@/assets/images/hygiene/zyrs.png" class="left" />
-            <div class="right">
-              <div class="right_top font">住院人数</div>
-              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
-              <div class="right_bottom">{{ data.mz.zyrs }}</div>
+          <div class="item5">
+            <img src="@/assets/images/hygiene/zyrs.png" class="left5" />
+            <div class="right5">
+              <div class="right5_top font">住院人数</div>
+              <img src="@/assets/images/hygiene/jt.png" class="right5_center" />
+              <div class="right5_bottom">{{ data.mz.zyrs }}</div>
             </div>
           </div>
         </div>
@@ -163,20 +163,20 @@
             </div>
           </div>
           <div class="minTopPart2">
-            <div class="left">
-              <div class="leftImg">
+            <div class="left5">
+              <div class="leftImg5">
                 <eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
               </div>
-              <div class="left_me">
+              <div class="left5_me">
                 <div>建档率</div>
                 <div class="bo">{{ data.jkda.jdl }}%</div>
               </div>
             </div>
-            <div class="right">
-              <div class="rightImg">
+            <div class="right5">
+              <div class="rightImg5">
                 <eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
               </div>
-              <div class="right_me">
+              <div class="right5_me">
                 <div>家庭医生签约率</div>
                 <div class="bo">{{ data.jkda.jtysqyl }}%</div>
               </div>
@@ -734,26 +734,26 @@ const getData = async () => {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  .item {
+  .item5 {
     display: flex;
     align-items: center;
-    .left {
+    .left5 {
       width: 102px;
       height: 102px;
     }
-    .right {
+    .right5 {
       margin-left: 10px;
-      .right_top {
+      .right5_top {
         font-size: 16px;
         color: #ffffff;
         line-height: 22px;
         letter-spacing: 2px;
       }
-      .right_center {
+      .right5_center {
         width: 100px;
         height: 7px;
       }
-      .right_bottom {
+      .right5_bottom {
         margin-top: 3px;
         padding: 5px;
         font-size: 22px;
@@ -1186,16 +1186,16 @@ const getData = async () => {
   margin-top: 35px;
   padding: 0 5px;
   box-sizing: border-box;
-  .left {
+  .left5 {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 13px;
-    .leftImg {
+    .leftImg5 {
       width: 90px;
       height: 90px;
     }
-    .left_me {
+    .left5_me {
       margin-left: 10px;
       display: flex;
       flex-direction: column;
@@ -1218,16 +1218,16 @@ const getData = async () => {
       }
     }
   }
-  .right {
+  .right5 {
     display: flex;
     align-items: center;
     // justify-content: center;
 
-    .rightImg {
+    .rightImg5 {
       width: 90px;
       height: 90px;
     }
-    .right_me {
+    .right5_me {
       margin-left: 10px;
       display: flex;
       flex-direction: column;
diff --git a/src/view/person/index.vue b/src/view/person/index.vue
index f09764a..4226495 100644
--- a/src/view/person/index.vue
+++ b/src/view/person/index.vue
@@ -9,7 +9,7 @@
           <div class="my-info-item">
             <div class="my-info-label">姓&emsp;&emsp;名</div>
             <div class="my-info-content">
-              <p>{{ baseInfo.nm }}</p>
+              <p>{{ baseInfo.nm || baseInfo.xm}}</p>
             </div>
           </div>
           <div class="my-info-item">
@@ -21,7 +21,8 @@
           <div class="my-info-item">
             <div class="my-info-label">证件号码</div>
             <div class="my-info-content">
-              <p>{{ baseInfo.identNo }}</p>
+              <p>******************</p>
+               <!-- <p>{{ baseInfo.identNo }}</p> -->
             </div>
           </div>
           <div class="my-info-item">
@@ -34,7 +35,8 @@
             <div class="my-info-label">居住状态</div>
             <div class="my-info-content">
               <p v-if="baseInfo.jzzt == 1">居住</p>
-              <p v-else>未居住</p>
+              <p v-else-if="baseInfo.jzzt == 0">未居住</p>
+              <p v-else></p>
             </div>
           </div>
           <div class="my-info-item">
@@ -52,7 +54,7 @@
           <div class="my-info-item">
             <div class="my-info-label">户口登记地</div>
             <div class="my-info-content">
-              <p>{{ baseInfo.domicAddr }}</p>
+              <p>{{ baseInfo.domicAddr || baseInfo.dz }}</p>
             </div>
           </div>
         </div>
@@ -408,13 +410,59 @@ const getData = (nm, identNo) => {
             item.show = Number(res.data[item.jkName]);
           }
         });
+        if(res.data.yljlx){
+          data.value=[
+            {
+              type:res.data.yljlx,
+              date:res.data.yljffrq,
+              sum:res.data.yljffje
+            }
+          ]
+        }else{
+           data.value=[]
+        }
         // console.log(dataMyTag.myTag, 555);
       }
     });
 };
+// const getData2 = (nm, identNo) => {
+//   http
+//     .get(`/api/ggfwyth/pg/lyxsdbrymdDetails?xm=${nm}&sfzhm=${identNo}`)
+//     .then((res) => {
+//       if (res.code == 200) {
+//         baseInfo.value = res.data;
+
+//         // dataMyTag.myTag.map((item) => {
+//         //   if (res.data[item.jkName]) {
+//         //     item.show = Number(res.data[item.jkName]);
+//         //   }
+//         // });
+//         if(res.data.yljlx){
+//           data.value=[
+//             {
+//               type:res.data.yljlx,
+//               date:res.data.yljffrq,
+//               sum:res.data.yljffje
+//             }
+//           ]
+//         }else{
+//            data.value=[]
+//         }
+//         // console.log(dataMyTag.myTag, 555);
+//       }
+//     });
+// };
 onMounted(() => {
   // console.log(routers.query);
-  getData(routers.query.nm, routers.query.identNo);
+  if(routers.query.type == 'map'){
+    getData(routers.query.nm, routers.query.identNo);
+  }else{
+    // getData2(routers.query.nm, routers.query.identNo);
+    baseInfo.value.nm=routers.query.nm;
+    baseInfo.value.dz=routers.query.dz;
+    baseInfo.value.identNo=routers.query.identNo;
+  }
+  
 });
 </script>
 
diff --git a/src/view/sy_details.vue b/src/view/sy_details.vue
index 8fb4969..c7e2bd4 100644
--- a/src/view/sy_details.vue
+++ b/src/view/sy_details.vue
@@ -19,6 +19,7 @@
           class="table_border"
           :row-style="rowState"
           :header-cell-style="tableHeaderColor"
+          @row-click="handleRowClick"
         >
           <el-table-column prop="xm" label="姓名" width="90" />
           <el-table-column prop="dz" label="地址" />
@@ -115,7 +116,7 @@
         >
           <el-table-column prop="fullName" label="姓名" width="90" />
           <el-table-column prop="address" label="地址" />
-          <el-table-column prop="age" label="年龄" width="60"/>
+          <el-table-column prop="age" label="年龄" width="60" />
           <!-- <el-table-column prop="IDNumber" label="身份证号" /> -->
           <el-table-column prop="PopulationLabel" label="人口标签" />
         </el-table>
@@ -137,7 +138,9 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue";
 import http from "@/utils/request.js";
-
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const routers = useRoute();
 const data = reactive({
   pagedData: [],
   first: true,
@@ -591,7 +594,14 @@ const getTable = async (url, currentPage) => {
       }
     });
 };
-
+const handleRowClick = (row, column, event) => {
+  // row 是当前行的数据
+  console.log(row);
+  router.push({
+    path: `/home/index/person`,
+    query: { nm: row.xm, identNo: row.sfzhm, dz: row.dz, type: "detail" },
+  });
+};
 onMounted(() => {
   getTable("/api/ggfwyth/pg/lyxsdbrymd", pagination.currentPage);
   handleCurrentChange(1);
diff --git a/src/view/sy_mapcopy.vue b/src/view/sy_mapcopy.vue
index af33dbf..acb188d 100644
--- a/src/view/sy_mapcopy.vue
+++ b/src/view/sy_mapcopy.vue
@@ -47,7 +47,7 @@
                       'below-line2': index % 2 === 0,
                     },
                   ]"
-                  >{{ (item.progress).toFixed(2) + "%" }}</span
+                  >{{ item.progress.toFixed(2) + "%" }}</span
                 >
                 <span
                   style="color: #fff; white-space: nowrap"
@@ -111,7 +111,7 @@
       <div class="right" style="width: 517px">
         <div class="jbggfwq">
           <div class="title">
-            <div class="title_name" ><span> 基本公共服务圈</span></div>
+            <div class="title_name"><span> 基本公共服务圈</span></div>
           </div>
           <div class="jbggfwq_content">
             <div
@@ -160,10 +160,10 @@
         @close="close"
         @handle="handlePagination"
       >
-      <template #jzzt="{ currentCol, currentData }">
-        <div v-if="currentData.jzzt==1">居住</div>
-        <div v-else>未居住</div>
-      </template>
+        <template #jzzt="{ currentCol, currentData }">
+          <div v-if="currentData.jzzt == 1">居住</div>
+          <div v-else>未居住</div>
+        </template>
       </Dialog>
     </teleport>
   </div>
@@ -239,7 +239,7 @@ const cfJd = ref("");
 //存放村社
 const cfCs = ref("");
 //点击存放村社暂时
-const cfCsZs=ref('')
+const cfCsZs = ref("");
 //地图
 var map = null;
 //默认龙游县灰色地块
@@ -970,7 +970,7 @@ const tableType = reactive({
     {
       label: "居住状态",
       property: "jzzt",
-      type:'slot'
+      type: "slot",
     },
     {
       label: "民族",
@@ -986,9 +986,7 @@ const tableType = reactive({
       width: "300px",
     },
   ],
-  data: [
- 
-  ],
+  data: [],
 });
 // 表格分页
 const pagination = reactive({
@@ -1032,7 +1030,7 @@ const clear = () => {
   title_cs.value = "";
   cfJd.value = "";
   cfCs.value = "";
-  cfCsZs.value='';
+  cfCsZs.value = "";
   cs_un_choose_arr.value.forEach((item, index) => {
     map.removeOverlay(cs_un_choose_arr.value[index]);
   });
@@ -1140,7 +1138,6 @@ const getData = async (i, e) => {
             percent: item.percent,
           });
         });
-        // console.log(personTotal.value,"111");
         // 年龄百分比
         const agename = [
           "09Percent",
@@ -1275,6 +1272,7 @@ const getDatas = async (e, i) => {
               cs_dd_arr.value.forEach((item, index) => {
                 map.removeOverlay(cs_dd_arr.value[index]);
               });
+
               cs_dd_arr.value = [...xuanzhongCs.value];
               cs_dd_arr.value.map((item, index) => {
                 DGcreateCs2(item, index);
@@ -1750,8 +1748,6 @@ const open_detail = () => {
     person_detail(age);
     dialogShow.value = true;
   }
-  
-  
 };
 const close = () => {
   dialogShow.value = false;
@@ -1778,11 +1774,13 @@ const person_detail = (age) => {
     .get(
       `/api/ggfwyth/ysyzt/getRysmzq?page=${pagination.currentPage}&size=${
         pagination.pageSize
-      }&age=${age || ""}&committee=${cfCsZs.value || ""}&town=${cfJd.value || ""}`
+      }&age=${age || ""}&committee=${cfCsZs.value || ""}&town=${
+        cfJd.value || ""
+      }`
     )
     .then((res) => {
       if (res.code == 200) {
-        tableType.data=res.data;
+        tableType.data = res.data;
         pagination.total = res.count;
       }
     });
@@ -2389,7 +2387,12 @@ const addPolygonCountyCs = () => {
           //   getDataBqs(cfJd.value, cfCs.value);
         }
         //这段注意
-        getDatas2(cfJd.value, choose.value.person, cfCs.value);
+        if (choose.value.person == 1) {
+          getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串
+        } else {
+          getDatas2(cfJd.value, choose.value.person - 1, cfCs.value);
+        }
+        // getDatas2(cfJd.value, choose.value.person, cfCs.value);
         addCsChoose();
         addCsUnChoose();
         // if (choose.value.person == "") {
@@ -2482,7 +2485,12 @@ const addCsUnChoose = () => {
         // });
         // getDataBqs(cfJd.value, cfCs.value);
         getDataBq(cfJd.value, cfCs.value);
-        getDatas2(cfJd.value, choose.value.person, cfCs.value);
+              if (choose.value.person == 1) {
+          getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串
+        } else {
+          getDatas2(cfJd.value, choose.value.person - 1, cfCs.value);
+        }
+        // getDatas2(cfJd.value, choose.value.person, cfCs.value);
         // if (
         //   choose.value.person == "cjr" ||
         //   choose.value.person == "dibian" ||
@@ -2667,7 +2675,7 @@ const createCs2 = (polygon, indexx) => {
   });
   map.addOverlay(cs_number_name_arr.value[indexx]);
   cs_number_name_arr.value[indexx].addEventListener("click", () => {
-    cfCsZs.value=polygon.name;
+    cfCsZs.value = polygon.name;
     if (
       choose.value.person == "cjr" ||
       choose.value.person == "dibian" ||
@@ -2737,10 +2745,10 @@ const DGcreateCs = (polygon, indexx) => {
 };
 //添加单个村社(+数量)
 const DGcreateCs2 = (polygon, indexx) => {
-  console.log(choose.value.person, "单个村社", polygon);
-  console.log("单个村社", polygon.name);
-  console.log("单个村社", polygon.number);
-  console.log("单个村社", polygon.swrs);
+  // console.log(choose.value.person, "单个村社", polygon);
+  // console.log("单个村社", polygon.name);
+  // console.log("单个村社", polygon.number);
+  // console.log("单个村社", polygon.swrs);
   function createLabelDOM() {
     var content = document.createElement("div");
     content.style.display = "flex";
@@ -2818,7 +2826,7 @@ const DGcreateCs2 = (polygon, indexx) => {
   map.addOverlay(cs_dd_arr.value[indexx]);
   cs_dd_arr.value[indexx].addEventListener("click", () => {
     console.log(cfJd.value, polygon.name);
-    cfCsZs.value=polygon.name;
+    cfCsZs.value = polygon.name;
     if (
       choose.value.person == "cjr" ||
       choose.value.person == "dibian" ||
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index 3cf990a..750816b 100644
--- a/src/view/sy_table.vue
+++ b/src/view/sy_table.vue
@@ -36,9 +36,9 @@
         </div>
       </div>
     </div>
-    <div class="displayFlex right_bg">
+    <div class="displayFlex right_bg" v-if="gk">
       <div class="formText">
-        <div class="formText_top">
+        <div class="formText_top" v-if="show_7yx">
           <div class="yd_title left_1">
             <div class="animate-border">
               <i></i>
@@ -102,7 +102,7 @@
           </div>
         </div>
         <div class="formText_bootom">
-          <div class="yd_title left_2">
+          <div class="yd_title left_2" :style="{'margin-top': show_7yx ? '40px' : '0px'}">
             <div class="animate-border">
               <i></i>
               <i></i>
@@ -143,11 +143,15 @@
         </div>
       </div>
     </div>
+    <work v-if="gaikuangList.work"></work>
+    <education v-if="gaikuangList.education"></education>
+    <yl v-if="gaikuangList.yl"></yl>
+    <hygiene v-if="gaikuangList.hygiene"></hygiene>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import icon1 from "@/assets/sy-table/sy-table9.png";
 import icon2 from "@/assets/sy-table/sy-table10.png";
 import icon3 from "@/assets/sy-table/sy-table11.png";
@@ -164,7 +168,10 @@ import Bj1 from "@/assets/sy-table/sy-table7.png";
 import Bj2 from "@/assets/sy-table/sy-table4.png";
 import Bj3 from "@/assets/sy-table/sy-table5.png";
 import Bj4 from "@/assets/sy-table/sy-table6.png";
-
+import work from "./table_gk/gk_work.vue";
+import education from "./table_gk/gk_education.vue";
+import yl from "./table_gk/gk_yl.vue";
+import hygiene from "./table_gk/gk_hygiene.vue";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/utils/request.js";
 import { ElMessage } from "element-plus";
@@ -186,7 +193,7 @@ const goto = (url, val) => {
 
 const data = reactive({
   taps1: "6",
-  taps: "0",
+  taps: "1",
   tabPosition: [
     {
       id: "0",
@@ -216,18 +223,22 @@ const data = reactive({
       son: [
         {
           id: "0",
-          name: "学前教育助学服务",
+          name: "概况",
         },
         {
           id: "1",
-          name: "义务教育服务",
+          name: "学前教育助学服务",
         },
         {
           id: "2",
-          name: "普通高中助学服务",
+          name: "义务教育服务",
         },
         {
           id: "3",
+          name: "普通高中助学服务",
+        },
+        {
+          id: "4",
           name: "中等职业教育助学服务",
         },
       ],
@@ -256,14 +267,18 @@ const data = reactive({
       son: [
         {
           id: "0",
-          name: "公共卫生服务",
+          name: "概况",
         },
         {
           id: "1",
-          name: "医疗保险服务",
+          name: "公共卫生服务",
         },
         {
           id: "2",
+          name: "医疗保险服务",
+        },
+        {
+          id: "3",
           name: "计划生育扶助服务",
         },
       ],
@@ -276,10 +291,14 @@ const data = reactive({
       son: [
         {
           id: "0",
-          name: "养老助老服务",
+          name: "概况",
         },
         {
           id: "1",
+          name: "养老助老服务",
+        },
+        {
+          id: "2",
           name: "养老保险服务",
         },
       ],
@@ -308,14 +327,18 @@ const data = reactive({
       son: [
         {
           id: "0",
-          name: "社会救助服务",
+          name: "概况",
         },
         {
           id: "1",
-          name: "法律援助服务",
+          name: "社会救助服务",
         },
         {
           id: "2",
+          name: "法律援助服务",
+        },
+        {
+          id: "3",
           name: "扶残助残服务",
         },
       ],
@@ -462,28 +485,67 @@ const data = reactive({
   ],
   Bj: [Bj, Bj1, Bj2, Bj3, Bj4],
 });
+const gaikuangList = reactive({
+  work: false,
+  education: false,
+  yl: false,
+  hygiene: false,
+});
+//是否显示七优享
+const show_7yx=ref(true);
+const gk = computed(() => {
+  if (
+    gaikuangList.work ||
+    gaikuangList.hygiene ||
+    gaikuangList.education ||
+    gaikuangList.yl
+  ) {
+    return false;
+  } else {
+    return true;
+  }
+});
 
 const tapshow = (parentId, childId) => {
-  // console.log(parentId, childId, "菜单名");
+  console.log(parentId, childId, "菜单名");
   data.taps1 = parentId.id;
   data.taps = childId;
-  getData(parentId.name, parentId.son[childId].name);
-
-  // 菜单名匹配
-  const menuName = [
-    "幼有善育",
-    "学有优教",
-    "劳有所得",
-    "病有良医",
-    "老有康养",
-    "住有宜居",
-    "弱有众扶",
-  ];
-  // 检查 parentId 的第一个字符是否与 menuName 中的第一个字符匹配
-  const firstChar = parentId.name.charAt(0);
-  const matchingMenu = menuName.find((name) => name.charAt(0) === firstChar);
-  if (matchingMenu) {
-    sevenYX(matchingMenu);
+  if (
+    childId == 0 &&
+    (parentId.name == "弱有所扶" ||
+      parentId.name == "学有所教" ||
+      parentId.name == "老有所养" ||
+      parentId.name == "病有所医")
+  ) {
+    gaikuang(parentId.name);
+  } else {
+    // gaikuangList.work = false;
+    // gaikuangList.education = false;
+    // gaikuangList.yl = false;
+    // gaikuangList.hygiene = false;
+      for (let name in gaikuangList) {
+      gaikuangList[name]=false;
+  }
+    getData(parentId.name, parentId.son[childId].name);
+    // 菜单名匹配
+    const menuName = [
+      "幼有善育",
+      "学有优教",
+      "劳有所得",
+      "病有良医",
+      "老有康养",
+      "住有宜居",
+      "弱有众扶",
+    ];
+    // 检查 parentId 的第一个字符是否与 menuName 中的第一个字符匹配
+    const firstChar = parentId.name.charAt(0);
+    const matchingMenu = menuName.find((name) => name.charAt(0) === firstChar);
+    if (matchingMenu) {
+      show_7yx.value=true;
+      sevenYX(matchingMenu);
+    }else{
+      show_7yx.value=false;
+    }
   }
 };
 const toggleVisibility = (val) => {
@@ -494,9 +556,25 @@ const toggleVisibility = (val) => {
       parent.visible = !parent.visible;
     }
   });
-  tapshow(val,0)
-};
+  console.log(val);
 
+  tapshow(val, 0);
+};
+const gaikuang = (name) => {
+  console.log(4444, name);
+  for (let name in gaikuangList) {
+      gaikuangList[name]=false;
+  }
+  if (name == "弱有所扶") {
+    gaikuangList.work = true;
+  } else if (name == "学有所教") {
+    gaikuangList.education = true;
+  } else if (name == "老有所养") {
+    gaikuangList.yl = true;
+  } else if (name == "病有所医") {
+    gaikuangList.hygiene = true;
+  }
+};
 // 服务表格样式
 const tableHeaderColor = (arg) => {
   return {
@@ -545,7 +623,8 @@ const getData = async (name, fullName) => {
               Bj: data.Bj[imageIndex],
               name: item.sx,
               text: item.bmfxqk,
-              progress: item.xh,
+              // progress: item.xh,
+              progress: '95', //进度条
             });
           });
         }
@@ -866,7 +945,7 @@ onMounted(() => {
   background-size: 100% 100%;
   // cursor: pointer;
   margin-bottom: 30px;
-  margin-top: 40px;
+  // margin-top: 40px;
 }
 </style>
 <style lang="scss" scoped>
diff --git a/src/view/table_gk/gk_education.vue b/src/view/table_gk/gk_education.vue
new file mode 100644
index 0000000..bdfa8e1
--- /dev/null
+++ b/src/view/table_gk/gk_education.vue
@@ -0,0 +1,1923 @@
+<template>
+  <div class="module11">
+    <div class="displayFlex left_bg">
+      <div class="flex1">
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <eP1 :list="data.xsql" v-if="showEchart"></eP1>
+        <div class="t_1"></div>
+        <div class="t_2">
+          <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
+            <div class="top">{{ item.value }}</div>
+            <div class="t_3">
+              <div :class="item.cls"></div>
+              <div class="right">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1" style="margin-top: 30px">
+        <div class="yd_title left_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="selectLint">
+          <div class="selectBox">
+            <el-select
+              v-model="selectData.value1"
+              placeholder="请选择"
+              size="large"
+              @change="selectChange1"
+            >
+              <el-option
+                v-for="item in selectData.options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <div class="selectBox">
+            <el-select
+              v-model="selectData.value2"
+              placeholder="请选择"
+              size="large"
+              @change="selectChange2"
+            >
+              <el-option
+                v-for="item in selectData.options2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </div>
+        <ePieRose :list="selectData.list" v-if="showEchart && showR"></ePieRose>
+      </div>
+    </div>
+    <div class="displayFlex center_bg">
+      <div class="flex1">
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="school">
+          <div class="schoolaBox">
+            <div class="schoola">
+              <span>{{ data.xxgk.xxzs }}</span>
+              <span class="schoola1">学校总数</span>
+            </div>
+            <div class="schoola">
+              <span>{{ data.xxgk.xszs }}</span>
+              <span class="schoola1">学生总数</span>
+            </div>
+            <div class="schoola">
+              <span>{{ data.xxgk.bjzs }}</span>
+              <span class="schoola1">班级总数</span>
+            </div>
+            <div class="schoola">
+              <span>{{ data.xxgk.jzgzs }}</span>
+              <span class="schoola1">教职工总数</span>
+            </div>
+          </div>
+          <div class="schoolb">
+            <img src="@/assets/eduImg/xxgkTop.png" class="gkTop" alt="" />
+            <div class="grade">
+              <div
+                class="schoolbs"
+                @click="showDialog('学校', '/api/ggfwyth/schoolList', '初中')"
+              >
+                <span class="spot font">初中</span>
+                <span class="font">{{ data.xxgk.czxxsl }}</span>
+              </div>
+              <div
+                class="schoolbs"
+                @click="showDialog('学校', '/api/ggfwyth/schoolList', '高中')"
+              >
+                <span class="spot font">高中</span>
+                <span class="font">{{ data.xxgk.gzxxsl }}</span>
+              </div>
+            </div>
+            <div class="grade">
+              <div
+                class="schoolbs"
+                @click="showDialog('学校', '/api/ggfwyth/schoolList', '小学')"
+              >
+                <span class="spot font">小学</span>
+                <span class="font">{{ data.xxgk.xxxxsl }}</span>
+              </div>
+              <div
+                class="schoolbs"
+                @click="showDialog('学校', '/api/ggfwyth/schoolList', '中职')"
+              >
+                <span class="spot font">中职</span>
+                <span class="font">{{ data.xxgk.zzxxsl }}</span>
+              </div>
+            </div>
+            <div class="grade grade1">
+              <div
+                class="schoolbs"
+                @click="showDialog('学校', '/api/ggfwyth/schoolList', '幼儿园')"
+              >
+                <span class="spot font">幼儿园</span>
+                <span class="font">{{ data.xxgk.yeyxxsl }}</span>
+              </div>
+              <div class="schoolbs">
+                <span
+                  class="spot font"
+                  @click="showDialog('学校', '/api/ggfwyth/schoolList', '特教')"
+                  >特殊教育</span
+                >
+                <span class="font">{{ data.xxgk.tsjyxxsl }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1">
+        <div style="width: 100%; display: flex; flex-wrap: wrap">
+          <edie :list="data.xzncxxsl" v-if="showEchart"></edie>
+          <edie5 :list="data.xzncjszcsl" v-if="showEchart"></edie5>
+          <!-- <div class="rating">
+            <edXX
+              :list="data.schoolData"
+              :active="selectData.active"
+            ></edXX>
+            <div class="ratingBtn">
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '县镇' }"
+              >
+                <span @click="ratingBtn('县镇')">县镇</span>
+              </div>
+              <div
+                class="onImg"
+                :class="{ ratingImg: selectData.active === '农村' }"
+              >
+                <span @click="ratingBtn('农村')">农村</span>
+              </div>
+            </div>
+          </div> -->
+        </div>
+      </div>
+      <div class="flex1">
+        <div class="fundingBox">
+          <div class="funding">
+            <span>资助项目</span>
+            <span>资助数量</span>
+            <span>资助金额</span>
+          </div>
+          <div
+            class="rolling"
+            ref="mainRef"
+            @mouseenter="stopAutoScroll"
+            @mouseleave="startAutoScroll"
+          >
+            <div
+              v-for="(item, index) in data.zzxm"
+              :key="index"
+              class="fundingContent"
+            >
+              <span class="spot">{{ item.zzxm }}</span>
+              <span class="spot">{{ item.zzsl }}</span>
+              <span class="spot">{{ item.zzje }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="flex1">
+        <div class="yd_title right_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="czr-sl">
+          <div class="historyimg historyimg1">
+            <span>覆盖医疗机构数量</span>
+            <span>{{ data.whistleblower.yljgsl }}</span>
+          </div>
+          <div class="historyimg historyimg2">
+            <span>启用角色数量</span>
+            <span>{{ data.whistleblower.qyjssl }}</span>
+          </div>
+          <!-- <img src="@/assets/eduImg/jyImg14.png" alt="" />
+          <img src="@/assets/eduImg/jyImg15.png" alt="" /> -->
+        </div>
+        <!-- <edCSR></edCSR> -->
+      </div>
+      <div class="flex11">
+        <div class="earlyWarning">
+          <div class="earlyWarning1">
+            <div>
+              <span class="green">{{ data.whistleblower.green }}</span>
+            </div>
+            <img src="@/assets/eduImg/jyImg10.png" alt="" />
+            <img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" />
+            <div class="historyimg historyimg1">
+              <span style="font-size: 18px">绿色预警</span>
+            </div>
+          </div>
+          <div class="earlyWarning1">
+            <div>
+              <span class="yellow">{{ data.whistleblower.yellow }}</span>
+            </div>
+            <img src="@/assets/eduImg/jyImg9.png" alt="" />
+            <img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" />
+            <div class="historyimg historyimg2">
+              <span style="font-size: 18px">黄色预警</span>
+            </div>
+          </div>
+          <div class="earlyWarning1">
+            <div>
+              <span class="red">{{ data.whistleblower.red }}</span>
+            </div>
+            <img src="@/assets/eduImg/jyImg8.png" alt="" />
+            <img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" />
+            <div class="historyimg historyimg3">
+              <span style="font-size: 18px">红色预警</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1">
+        <div style="display: flex; justify-content: center">
+          <div class="czr-bj">
+            <!-- <div>
+              <div class="czrBox">
+                <div class="situation situation1"></div>
+                <edxs
+                  :list="data.whistleblower.culeTotal.data"
+                  :month="data.whistleblower.culeTotal.time"
+                ></edxs>
+              </div>
+              <div class="czrBox">
+                <div class="situation situation2"></div>
+                <edxs1
+                  :list="data.whistleblower.gaCules.data"
+                  :month="data.whistleblower.gaCules.time"
+                ></edxs1>
+              </div>
+            </div> -->
+            <!-- <div> -->
+            <div class="czrBox">
+              <div class="situation situation3"></div>
+              <edxs2
+                :list="data.whistleblower.newCules.data"
+                :month="data.whistleblower.newCules.time"
+                v-if="showEchart"
+              ></edxs2>
+            </div>
+            <div class="clue">
+              <div class="clueBox">
+                <div class="clueTitle">预警线索总数</div>
+                <div class="clueNum">{{ data.culeTotal }}</div>
+                <div class="clueUnit">条</div>
+              </div>
+              <div class="clueBox">
+                <div class="clueTitle">公安协同 <br />处置线索</div>
+                <div class="clueNum">{{ data.gaCules }}</div>
+                <div class="clueUnit">条</div>
+              </div>
+              <div class="clueBox">
+                <div class="clueTitle">检察官处置线索</div>
+                <div class="clueNum">{{ data.jcgCules }}</div>
+                <div class="clueUnit">条</div>
+              </div>
+            </div>
+            <!-- <div class="czrBox">
+                <div class="situation situation4"></div>
+                <edxs3
+                  :list="data.whistleblower.jcgCules.data"
+                  :month="data.whistleblower.jcgCules.time"
+                ></edxs3>
+              </div> -->
+            <!-- </div> -->
+          </div>
+        </div>
+        <!-- <eBubble></eBubble> -->
+      </div>
+    </div>
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :pagination="pagination"
+      @close="close"
+      @handle="handlePagination"
+    >
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeMount } from "vue";
+import edxs from "../echarts_education/edXS.vue";
+import edxs1 from "../echarts_education/edXS1.vue";
+import edxs2 from "../echarts_education/edXS2.vue";
+import edxs3 from "../echarts_education/edXS3.vue";
+import edie5 from "../echarts_education/pie5.vue";
+
+import edie from "../echarts_education/pie.vue";
+import edCSR from "../echarts_education/edCSR.vue";
+import edXX from "../echarts_education/edXX.vue";
+import ePie1 from "../echarts_education/pie1.vue";
+import ePie2 from "../echarts_education/pie2.vue";
+import ePie3 from "../echarts_education/pie3.vue";
+import ePie4 from "../echarts_education/pie4.vue";
+import ePieRose from "../echarts_education/pieRose.vue";
+import eP1 from "../echarts_education/eP1.vue";
+import http from "@/utils/request.js";
+import Dialog from "../dialog/dialog.vue";
+const showR = ref(true); //下拉
+const selectData = reactive({
+  value1: "0",
+  value2: "0",
+  list: [],
+  list1: [],
+  active: "县镇",
+  evaluationAnalysis: {},
+  options1: [
+    {
+      value: "1",
+      label: "2023年秋季小学生心理健康普查",
+    },
+    {
+      value: "2",
+      label: "2023年秋季初中生心理健康普查",
+    },
+    {
+      value: "3",
+      label: "2023年秋季高中生心理健康普查",
+    },
+  ],
+  options2: [
+    {
+      value: "tes1",
+      label: "中小学心理健康诊断测验(MHT）",
+    },
+    {
+      value: "tes2",
+      label: "小学心理健康诊断测验",
+    },
+    // {
+    //   value: "tes3",
+    //   label: "中学心理健康诊断",
+    // },
+  ],
+});
+var roseData1 = ref([
+  {
+    name: "正常",
+    value: 17,
+  },
+  {
+    name: "关注",
+    value: 16,
+  },
+  {
+    name: "追踪",
+    value: 14,
+  },
+  {
+    name: "异常",
+    value: 8,
+  },
+  {
+    name: "警戒",
+    value: 8,
+  },
+]);
+var roseData2 = ref([
+  {
+    name: "正常",
+    value: 37,
+  },
+  {
+    name: "关注",
+    value: 26,
+  },
+  {
+    name: "追踪",
+    value: 24,
+  },
+  {
+    name: "异常",
+    value: 18,
+  },
+  {
+    name: "警戒",
+    value: 18,
+  },
+]);
+var roseData3 = ref([
+  {
+    name: "正常",
+    value: 227,
+  },
+  {
+    name: "关注",
+    value: 169,
+  },
+  {
+    name: "追踪",
+    value: 114,
+  },
+  {
+    name: "异常",
+    value: 98,
+  },
+  {
+    name: "警戒",
+    value: 78,
+  },
+]);
+//详情弹框
+const dialogShow = ref(false);
+const tableType = reactive({
+  url: "",
+  title: "",
+  columns: [
+    {
+      label: "学校名称",
+      property: "xxmc",
+    },
+    {
+      label: "区域",
+      property: "qq",
+    },
+    {
+      label: "学段",
+      property: "xd",
+    },
+    {
+      label: "班级数",
+      property: "bjs",
+    },
+    {
+      label: "教师数",
+      property: "jss",
+    },
+    {
+      label: "学生数",
+      property: "xss",
+    },
+    {
+      label: "性质",
+      property: "xz",
+    },
+  ],
+  data: [],
+});
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+  school: "",
+});
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+  getTable(tableType.url, pagination.currentPage);
+};
+const showDialog = (title, url, school) => {
+  tableType.title = title;
+  pagination.school = school;
+  tableType.url = url;
+  pagination.currentPage = 1;
+  dialogShow.value = true;
+  getTable(url, pagination.currentPage);
+};
+//获取表格数据
+const getTable = (url, currentPage) => {
+  dialogShow.value = true;
+  http
+    .get(
+      `${url}?page=${currentPage}&size=${pagination.pageSize}&xd=${pagination.school}`
+    )
+    .then((res) => {
+      if (res.code == 200) {
+        tableType.data = res.data;
+        pagination.total = res.count;
+        dialogShow.value = true;
+      }
+    });
+};
+const close = () => {
+  dialogShow.value = false;
+};
+
+//----选择
+const selectChange1 = () => {
+  selectData.options1 = [];
+  selectData.options2 = [];
+  selectData.evaluationAnalysis.forEach((item, index) => {
+    const newOption = {
+      value: `${index}`,
+      label: item.planTitle,
+    };
+    selectData.options1.push(newOption);
+  });
+  if (
+    selectData.evaluationAnalysis[selectData.value1] &&
+    selectData.evaluationAnalysis[selectData.value1].child
+  ) {
+    selectData.evaluationAnalysis[selectData.value1].child.forEach(
+      (item, index) => {
+        const newOption = {
+          value: `${index}`,
+          label: item.title,
+        };
+        selectData.options2.push(newOption);
+      }
+    );
+  }
+  selectData.value2 = "0";
+  selectChange2();
+};
+const selectChange2 = () => {
+  showR.value = false;
+  roseData1.value.forEach((item, index) => {
+    item.value =
+      selectData.evaluationAnalysis[selectData.value1].child[
+        selectData.value2
+      ].statistics[index + 1];
+  });
+
+  selectData.list = roseData1.value;
+  // console.log(selectData.list);
+
+  setTimeout(() => {
+    showR.value = true;
+  }, 100);
+};
+
+// const ratingBtn = (item) => {
+//   selectData.active = item; // 设置当前选中的项目
+//   switch (selectData.active) {
+//     // case "城市":
+//     //   selectData.list1 = schoolData.value;
+//     //   break;
+//     case "县镇":
+//       data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
+//       data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
+//       data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
+//       data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
+//       data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
+//       data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
+//       break;
+//     case "农村":
+//       data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
+//       data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
+//       data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
+//       data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
+//       data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
+//       data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
+//       break;
+//     default:
+//       break;
+//   }
+// };
+const showEchart = ref(false);
+const data = reactive({
+  xsql: [],
+  zdgz: [
+    {
+      name: "留守儿童",
+      value: 16.1,
+      cls: "left1",
+    },
+    {
+      name: "独生子女",
+      value: 32.1,
+      cls: "left2",
+    },
+    {
+      name: "单亲家庭",
+      value: 65.1,
+      cls: "left3",
+    },
+    {
+      name: "享受低保",
+      value: 0.1,
+      cls: "left4",
+    },
+  ],
+  xxgk: {},
+  xzncjszcsl: {},
+  xzncxxsl: [[], []],
+  zzxm: [],
+  schoolData: [
+    { name: "副高级", value: "" },
+    { name: "正高级", value: "" },
+    { name: "未定级", value: "" },
+    { name: "员级", value: "" },
+    { name: "中级", value: "" },
+    { name: "助理级", value: "" },
+  ],
+  whistleblower: {
+    yljgsl: 10, //覆盖医疗机构数量
+    qyjssl: 3, //吹哨人启用角色
+    green: 316895, //绿色
+    yellow: 16676, //黄色
+    red: 6242, //红色
+    culeTotal: {
+      data: ["255", "165", "165", "165", "165"],
+      time: ["5.31", "6.1", "6.2", "6.3", "6.4"],
+    }, //预警线索总数量
+    newCules: {
+      data: ["255", "165", "165", "165", "165"],
+      time: ["5.31", "6.1", "6.2", "6.3", "6.4"],
+    }, //每日新增线索
+    gaCules: {
+      data: ["255", "165", "165", "165", "165"],
+      time: ["5.31", "6.1", "6.2", "6.3", "6.4"],
+    }, //公安协同处置线索
+    jcgCules: {
+      data: ["255", "165", "165", "165", "165"],
+      time: ["5.31", "6.1", "6.2", "6.3", "6.4"],
+    }, //检察官协同处置线索
+  },
+  culeTotal: "", //预警线索总数量最新值
+  gaCules: "", //公安协同处置线索最新值
+  jcgCules: "", //检察官协同处置线索最新值
+});
+const getData = async () => {
+  await http.get("/api/ggfwyth/education").then((res) => {
+    if (res.code == 200) {
+      // 学生情况
+      data.xsql.push(res.data.xssl.zz);
+      data.xsql.push(res.data.xssl.gz);
+      data.xsql.push(res.data.xssl.cz);
+      data.xsql.push(res.data.xssl.xx);
+      data.xsql.push(res.data.xssl.yey);
+      data.xsql.push(res.data.xssl.tsjy);
+
+      // 重点关注
+      data.zdgz[0].value = res.data.zdgz.lset;
+      data.zdgz[1].value = res.data.zdgz.dszn;
+      data.zdgz[2].value = res.data.zdgz.dqjt;
+      data.zdgz[3].value = res.data.zdgz.xsdb;
+      // 测评分析
+      selectData.evaluationAnalysis = res.data.cpfx;
+      selectChange1();
+      // 学校概况
+      data.xxgk = res.data.xxgk;
+      // 县镇农村学校数量 初始化数据
+      data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx);
+      data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz);
+      data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz);
+      data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx);
+      data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz);
+      data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
+      // 县镇农村教师职称数量
+      data.xzncjszcsl = res.data.xzncjszcsl;
+      // 资助项目
+      data.zzxm = res.data.zzxm;
+      // 吹哨人
+      data.whistleblower = res.data.whistleblower;
+      // 预警线索
+      data.culeTotal = res.data.whistleblower.culeTotal.data.slice(-1)[0];
+      data.gaCules = res.data.whistleblower.gaCules.data.slice(-1)[0];
+      data.jcgCules = res.data.whistleblower.jcgCules.data.slice(-1)[0];
+
+      showEchart.value = true;
+    }
+  });
+};
+//自动滚动
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  if (!mainEl) {
+    // console.error("mainRef is not defined");
+    return;
+  }
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+
+onBeforeMount(async () => {
+  selectData.list = roseData1.value;
+  getData();
+});
+onMounted(() => {
+  startAutoScroll();
+});
+</script>
+
+<style lang="scss" scoped>
+.displayFlex {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // flex: 1;
+  width: 30%;
+}
+
+.flex1 {
+  box-sizing: border-box;
+}
+
+.module11 {
+  display: flex;
+  width: 100%;
+//   margin-top: 112px;
+}
+
+.left_bg {
+  width: 520px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_bg {
+  width: 520px;
+  box-sizing: border-box;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.right_bg {
+  width: 540px;
+  box-sizing: border-box;
+  padding-right: 0px;
+  padding-left: 20px;
+  margin-left: 28px;
+  background-image: url(@/assets/images/right_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_1 {
+  // background-image: url(@/assets/eduImg/title1.png);
+  background-image: url(@/assets/images/education/new_xsqk.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_2 {
+  background-image: url(@/assets/images/education/new_cpfx.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_1 {
+  background-image: url(@/assets/images/education/new_xxgk.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.right_1 {
+  background-image: url(@/assets/images/education/new_csr.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+// .yd_title {
+//   // background-image: url(@/assets/img_04.png);
+//   // background-repeat: no-repeat;
+//   // background-size: 100% 100%;
+//   box-sizing: border-box;
+//   width: 100%;
+//   height: 36px;
+//   position: relative;
+
+//   .text {
+//     font-size: 16px;
+//     font-family: SourceHanSansCN;
+//     font-weight: bold;
+//     color: #ffffff;
+//     position: absolute;
+//     left: 33px;
+//     top: 3px;
+//   }
+// }
+
+.basicInformation {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-top: 22px;
+
+  .basicInformation_item {
+    flex: 0 0 50%;
+    padding: 0 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      width: 79px;
+      height: 47px;
+    }
+
+    .right {
+      margin-left: 4px;
+
+      .label {
+        background-image: url(@/assets/img_11.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        margin-bottom: 4px;
+
+        span {
+          font-size: 12px;
+          font-weight: 400;
+          color: #eff0f1;
+          line-height: 19px;
+          margin-left: 2px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: bold;
+        color: #6acbff;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.visitLog {
+  .visitLog_item {
+    display: flex;
+    align-items: center;
+    background-image: url(@/assets/img_12.png);
+    background-size: 100% 100%;
+    margin-top: 16px;
+    padding: 15px 8px;
+    box-sizing: border-box;
+
+    img {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .visitLog_item_box {
+      flex: auto;
+
+      h4 {
+        font-size: 18px;
+        font-family: MicrosoftYaHei;
+        font-weight: bold;
+        color: #0096ff;
+        margin-bottom: 2px;
+      }
+
+      p {
+        font-size: 12px;
+        font-family: SourceHanSansCN;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 6px;
+      }
+    }
+
+    .check {
+      font-size: 12px;
+      font-family: SourceHanSansCN;
+      font-weight: 400;
+      color: #0096ff;
+      line-height: 20px;
+    }
+  }
+}
+
+.history {
+  padding-top: 12px;
+
+  p {
+    margin-top: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 28px;
+    border-bottom: 13px solid rgba(57, 59, 109, 1);
+  }
+}
+
+.concernLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 20px;
+
+  span {
+    text-align: center;
+    background: rgba(0, 89, 130, 0.73);
+    border-radius: 10px;
+    width: 118px;
+    height: 49px;
+    line-height: 49px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #ffffff;
+    margin: 0 10px;
+  }
+}
+
+.property {
+  display: flex;
+  padding: 14px 0 10px;
+
+  .property_box {
+    //background-image: url(@/assets/img_05.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 179px;
+    height: 91px;
+    margin: 0 12px;
+    text-align: center;
+
+    h5 {
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      margin: 9px 0 16px;
+    }
+
+    p {
+      font-size: 21px;
+      font-weight: bold;
+      color: #48ece7;
+    }
+  }
+}
+
+.activity {
+  h5 {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 164, 250, 0.8);
+    line-height: 47px;
+    border-bottom: 2px solid rgba(0, 164, 250, 1);
+    margin-bottom: 17px;
+  }
+
+  .activity_content {
+    margin: 0 -6px 12px;
+    display: flex;
+
+    .activity_box {
+      width: 50%;
+      display: inline-block;
+      margin: 0 6px;
+      box-sizing: border-box;
+      background-color: rgba(15, 28, 54, 1);
+      padding: 12px 12px 19px;
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 27px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.monitor {
+  .monitor_box {
+    display: flex;
+    padding: 8px 0;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
+    img {
+      width: 115px;
+      height: 84px;
+      margin-right: 21px;
+    }
+
+    .monitor_box_text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      h4 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #818181;
+        line-height: 23px;
+      }
+    }
+  }
+}
+
+.yd_title {
+  // background-image: url(@/assets/img_04.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  box-sizing: border-box;
+  width: 98%;
+  height: 42px;
+  position: relative;
+  overflow: hidden;
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 3px;
+  }
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+.mechanism {
+  background-image: url(@/assets/YLTitle/titleImg10.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.flex11 {
+  padding: 50px 0;
+  // margin-top: 54px;
+}
+
+.czr-sl {
+  display: flex;
+
+  .historyimg {
+    width: 255px;
+    height: 56px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: 70px;
+
+    span {
+      font-weight: 600;
+      font-size: 17px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 2px;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+      padding-right: 10px;
+    }
+  }
+
+  .historyimg1 {
+    background-image: url(@/assets/eduImg/jyImg14.png);
+    margin-right: 10px;
+  }
+
+  .historyimg2 {
+    background-image: url(@/assets/eduImg/jyImg15.png);
+  }
+}
+
+.earlyWarning {
+  height: calc(100% - 10px);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .earlyWarning1 {
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-style: normal;
+    font-family: PangMenZhengDao;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    .ppImg {
+      position: absolute;
+      width: 160px;
+      height: 120px;
+      top: 20px;
+    }
+
+    img {
+      width: 136px;
+      height: 100px;
+    }
+
+    .green {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+      background-image: linear-gradient(180deg, #7be546 0%, #38ffb1 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .yellow {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+      background-image: linear-gradient(180deg, #ee8404 0%, #efd404 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .red {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+      background-image: linear-gradient(180deg, #ff3e00 0%, #ed5a2d 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .historyimg {
+      width: 140px;
+      height: 19px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        font-weight: 500;
+        font-size: 14px;
+        color: #ffffff;
+        letter-spacing: 4px;
+        font-style: normal;
+        font-family: PingFangSC, PingFang SC;
+      }
+    }
+
+    .historyimg1 {
+      background-image: url(@/assets/eduImg/jyImg4.png);
+    }
+
+    .historyimg2 {
+      background-image: url(@/assets/eduImg/jyImg6.png);
+    }
+
+    .historyimg3 {
+      background-image: url(@/assets/eduImg/jyImg5.png);
+    }
+  }
+}
+
+.czr-bj {
+  width: 529px;
+  border-radius: 2px;
+  // padding-top: 20px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+
+  // height: calc(100% - 26px);
+  // height: 200px;
+  // background: rgba(0, 103, 165, 0.18);
+  // box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
+  // box-sizing: border-box;
+
+  .czrBox {
+    // height: 104px;
+    // width: 280px;
+    width: 100%;
+    min-height: 310px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .column {
+      height: calc(100% - 26px);
+      overflow-y: auto;
+      font-size: 14px;
+      color: #ffffff;
+      padding-left: 18px;
+      padding-right: 18px;
+    }
+  }
+  .clue {
+    display: flex;
+    align-items: center;
+    margin-top: 37px;
+    .clueBox {
+      width: 160px;
+      height: 173px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      background-image: url(@/assets/eduImg/xxBJ.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+
+      .clueTitle {
+        margin-top: 22px;
+        font-family: PangMenZhengDao, PangMenZhengDao;
+        font-weight: normal;
+        font-size: 20px;
+        color: #ffffff;
+        letter-spacing: 1px;
+        text-shadow: 0px 2px 4px #3575f9;
+        text-align: center;
+        font-style: normal;
+      }
+      .clueNum {
+        margin-top: 42px;
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 32px;
+        color: #ffffff;
+        letter-spacing: 1px;
+        text-align: center;
+        font-style: normal;
+      }
+      .clueUnit {
+        margin-top: 4px;
+        font-weight: 500;
+        font-size: 16px;
+        color: #9cdeff;
+        text-align: center;
+        font-style: normal;
+        font-family: PingFangSC, PingFang SC;
+      }
+    }
+    .clueBox:nth-child(2) {
+      margin: 0 20px;
+      .clueTitle {
+        margin-top: 10px;
+      }
+      .clueNum {
+        margin-top: 28px;
+      }
+    }
+  }
+
+  .situation {
+    width: 196px;
+    height: 45px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 16px;
+  }
+
+  .situation1 {
+    background-image: url(@/assets/images/education/xs.png);
+  }
+
+  .situation2 {
+    background-image: url(@/assets/images/education/xs2.png);
+  }
+
+  .situation3 {
+    background-image: url(@/assets/images/education/xs1.png);
+  }
+  .situation4 {
+    background-image: url(@/assets/images/education/xs3.png);
+  }
+}
+
+.school {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  .schoolaBox {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .schoola {
+    width: 124px;
+    height: 79px;
+    margin-top: 20px;
+    padding: 2px 0 14px 0;
+    box-sizing: border-box;
+    background-image: url(@/assets/eduImg/jyImg3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    justify-content: space-between;
+
+    span {
+      // font-weight: 500;
+      // font-size: 14px;
+      // color: #ffffff;
+      // letter-spacing: 4px;
+      // font-style: normal;
+      // font-family: PingFangSC, PingFang SC;
+
+      font-family: TCloudNumber, TCloudNumber;
+      // font-weight: bold;
+      font-size: 23px;
+      color: #ffffff;
+      line-height: 30px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 23px rgba(0, 52, 52, 0.5);
+      text-align: center;
+      font-style: normal;
+    }
+
+    .schoola1 {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 3px;
+      text-shadow: 0px 0px 4px rgba(60, 145, 249, 0.65);
+      text-align: center;
+      font-style: normal;
+    }
+  }
+
+  .schoolb {
+    width: 500px;
+    height: 241px;
+    // height: calc(100% - 0px);
+    background-image: url(@/assets/eduImg/jyImg2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0;
+    box-sizing: border-box;
+    position: relative;
+
+    .gkTop {
+      position: absolute;
+      top: 4px;
+      left: 145px;
+      animation: example 3s infinite linear;
+    }
+    @keyframes example {
+      0% {
+        transform: translateY(0);
+      }
+      25% {
+        transform: translateY(-3px);
+      }
+      50% {
+        transform: translateY(0);
+      }
+      75% {
+        transform: translateY(3px);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
+    .gkMove {
+      position: absolute;
+      top: 4px;
+      left: -2px;
+      width: 98%;
+      height: 96%;
+    }
+    span {
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 4px;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+    }
+
+    .grade {
+      display: flex;
+      justify-content: space-between;
+      padding: 36px 0 0px 18px;
+
+      .schoolbs {
+        // width: 128px;
+        cursor: pointer;
+        height: 41px;
+        padding: 0px 20px 0 30px;
+        background-image: url(@/assets/eduImg/jyImg1.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+
+      .spot {
+        position: relative;
+        margin-right: 7px;
+      }
+
+      /* 添加伪元素圆点 */
+      .spot::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: -16px;
+        /* 调整圆点的位置 */
+        transform: translateY(-50%);
+        width: 6px;
+        height: 6px;
+        background-color: rgba(0, 230, 255, 1);
+        border-radius: 50%;
+        box-shadow: 0px 0px 7px 0px #00ffd3;
+        filter: blur(0px);
+      }
+    }
+
+    .grade1 {
+      padding: 12px 100px 0 100px;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.fundingBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .funding {
+    width: 500px;
+    height: 34px;
+    margin-top: 20px;
+    // padding: 10px 0 14px 0;
+    box-sizing: border-box;
+    background-image: url(@/assets/eduImg/jyImg17.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    // align-items: center;
+    // justify-content: center;
+    // flex-direction: column;
+    // justify-content: space-between;
+    span {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 17px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 3px;
+    }
+  }
+
+  .rolling {
+    width: 100%;
+    height: 200px;
+    // height: calc(100% - 26px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 6px;
+
+    .fundingContent {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-top: 10px;
+      width: 93.2%;
+      // min-height: 34px;
+      padding: 4px 0;
+      box-sizing: border-box;
+      background-image: url(@/assets/eduImg/jyImg16.png);
+
+      span {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        width: 33%;
+        padding-left: 50px;
+      }
+    }
+  }
+}
+
+.rating {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .ratingBtn {
+    display: flex;
+    // align-items: center;
+
+    .onImg {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg19.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      /* 添加指针样式以指示可点击 */
+    }
+
+    .ratingImg {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg18.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .onImg.active {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg18.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+
+    span {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 1px;
+      font-family: PingFangSC, PingFang SC;
+    }
+  }
+}
+
+.selectLint {
+  width: 94%;
+  display: flex;
+  margin: 30px 0 10px;
+  justify-content: space-between;
+
+  .selectBox {
+    width: 48%;
+    background-image: url(@/assets/eduImg/jyImg7.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.column::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+/* 滚动条整体部分 */
+.rolling::-webkit-scrollbar {
+  width: 5px;
+  // height: 10px;
+}
+
+/* 滚动槽 */
+.rolling::-webkit-scrollbar-track {
+  border-radius: 1px;
+  background: rgba(0, 128, 231, 0.56);
+  -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
+}
+
+/* 滚动条滑块样式 */
+.rolling::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border-radius: 6px;
+  background: rgba(0, 162, 231, 1);
+  -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
+}
+
+.t_1 {
+  margin: 10px auto;
+  width: 100%;
+  height: 52px;
+  background-image: url(@/assets/images/education/title.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.t_2 {
+  margin-top: 5px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-around;
+
+  .t_2_1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .top {
+      font-size: 26px;
+      color: #ffffff;
+      line-height: 30px;
+    }
+
+    .t_3 {
+      width: 120px;
+      height: 90px;
+      background-image: url(@/assets/images/education/fk.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+
+      .left1 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/lset.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .left2 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/dszn.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .left3 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/dqjt.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .left4 {
+        position: absolute;
+        left: 15px;
+        top: 35px;
+        width: 40px;
+        height: 40px;
+        background-image: url(@/assets/images/education/xsdb.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .right {
+        position: absolute;
+        left: 65px;
+        top: 35px;
+        width: 38px;
+        height: 40px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #ffffff;
+        line-height: 20px;
+        letter-spacing: 4px;
+        text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+        text-align: center;
+        font-style: normal;
+      }
+    }
+  }
+}
+.font {
+  font-size: 16px !important;
+}
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1);
+
+  --el-table-border-color: none;
+  border: 1px solid #7aceff;
+}
+.table {
+  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+    border: none !important;
+    padding-left: 10px !important;
+  }
+
+  :deep(.el-table td.el-table__cell) {
+    padding-left: 10px;
+  }
+}
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: #2f4b74;
+}
+
+:deep(.el-table__empty-block) {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
+</style>
+<style lang="scss">
+.selectBox {
+  .el-select--large .el-select__wrapper {
+    // font-size: 18px !important;
+    span,
+    p,
+    a {
+      font-size: 16px;
+    }
+  }
+
+  .el-select__wrapper {
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+
+  .el-select__placeholder {
+    color: #fff !important;
+  }
+
+  .el-select__caret {
+    color: #fff !important;
+    font-size: 18px !important;
+  }
+}
+</style>
diff --git a/src/view/table_gk/gk_hygiene.vue b/src/view/table_gk/gk_hygiene.vue
new file mode 100644
index 0000000..ff1e33b
--- /dev/null
+++ b/src/view/table_gk/gk_hygiene.vue
@@ -0,0 +1,1325 @@
+<template>
+  <div class="module11">
+    <div class="displayFlex left_bg">
+      <div class="flex1">
+        <div class="yd_title "    :class="leftchoose.first == '1' ? 'left_1' : 'left_1_1'"
+          @click="change2('first')">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          <!-- <span class="text">
+            <img
+              v-if="leftchoose.first == '1'"
+              src="@/assets/images/hygiene/yb_1.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/hygiene/yb_1_1.png"
+              class="c"
+              @click="change('first', '1')"
+            />
+            <img
+              v-if="leftchoose.first == '2'"
+              src="@/assets/images/hygiene/yb_2.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/hygiene/yb_2_1.png"
+              class="c"
+              @click="change('first', '2')"
+            />
+          </span> -->
+        </div>
+        <ePie
+          v-if="leftchoose.first == '1' && showEchart"
+          :list="data.medicalInsurance.ffrc"
+          :year="data.medicalInsurance.year"
+        ></ePie>
+        <ePie2
+          v-else
+          :list="data.medicalInsurance.ffje"
+          :year="data.medicalInsurance.year"
+        ></ePie2>
+        <div></div>
+        <div class="left_1_xia">
+          <div class="left_1_xia_item" style="flex: 1.5">
+            <div class="choose">
+              <div
+                :class="
+                  tabYd[0].choose == '异地就医人数' ? 'choose_1' : 'choose_2'
+                "
+                @click="changeYd('异地就医人数')"
+              >
+                异地就医人数
+              </div>
+              <div
+                :class="
+                  tabYd[0].choose == '异地就医金额' ? 'choose_1' : 'choose_2'
+                "
+                @click="changeYd('异地就医金额')"
+              >
+                异地就医金额
+              </div>
+            </div>
+            <ePie3
+              :list="data.medicalInsurance.ffrc"
+              :year="data.medicalInsurance.year"
+              v-if="showEchart && tabYd[0].choose == '异地就医人数'"
+            ></ePie3>
+            <ePie3_1
+              :list="data.medicalInsurance.ffrc"
+              :year="data.medicalInsurance.year"
+              v-if="showEchart && tabYd[0].choose == '异地就医金额'"
+            ></ePie3_1>
+          </div>
+          <div class="left_1_xia_item" style="margin-top: 40px">
+            <ePie4
+              :list="data.lxbx.lxbxrs"
+              :year="data.lxbx.year"
+              v-if="showEchart"
+            ></ePie4>
+            <div class="historyimg">手工零星报销人数</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex1" style="margin-top: 10px">
+        <div
+          class="yd_title"
+          :class="lmb == '两慢病' ? 'left_3' : 'left_3_1'"
+          @click="lmbqh"
+        >
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <tnb
+          :list="data.lmb.tnbrs"
+          :list2="data.lmb.gxyrs"
+          :year="data.lmb.year"
+          v-if="showEchart && lmb == '两慢病'"
+        ></tnb>
+        <mfyyqk
+          :list="data.mfyyqk"
+          v-if="showEchart && lmb == '免费用药情况'"
+        ></mfyyqk>
+      </div>
+    </div>
+    <div class="displayFlex center_bg">
+      <div class="flex1">
+        <div class="yd_title center_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="center_top">
+          <div class="item">
+            <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
+            <div class="right">
+              <div class="right_top font">门急诊人次</div>
+              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
+              <div class="right_bottom">{{ data.mz.mjzrc }}</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="@/assets/images/hygiene/zyrs.png" class="left" />
+            <div class="right">
+              <div class="right_top font">住院人数</div>
+              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
+              <div class="right_bottom">{{ data.mz.zyrs }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1" style="flex: 0.3">
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="minTop">
+          <div class="minTopPart">
+            <div class="history2">
+              <div class="va">{{ data.jkda.jdfs }}</div>
+              <img src="@/assets/images/hygiene/shang_left.png" alt="" />
+              <img
+                class="moveImg"
+                src="@/assets/images/hygiene/shang_left2.png"
+                alt=""
+              />
+              <img
+                class="moveImg2"
+                src="@/assets/images/hygiene/jd.gif"
+                alt=""
+              />
+              <div class="historyimg font" style="padding:0 20px;">建档份数</div>
+            </div>
+          </div>
+          <div class="minTopPart2">
+            <div class="left">
+              <div class="leftImg">
+                <eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
+              </div>
+              <div class="left_me">
+                <div>建档率</div>
+                <div class="bo">{{ data.jkda.jdl }}%</div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="rightImg">
+                <eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
+              </div>
+              <div class="right_me">
+                <div>家庭医生签约率</div>
+                <div class="bo">{{ data.jkda.jtysqyl }}%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1" style="margin-top: 20px">
+        <div class="yd_title familyPlanning">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <!-- <div style="width: 100%; "> -->
+        <eP5 :list="data.jsbgl" v-if="showEchart"></eP5>
+        <!-- </div> -->
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="flex1" style="flex: 0.9">
+        <div class="yd_title mechanism">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="history">
+          <div class="history1">
+            <div class="va">{{ data.fyglrs.ycfrc }}</div>
+            <img src="@/assets/images/hygiene/fy.png" alt="" />
+            <img src="@/assets/images/hygiene/fy1.png" alt="" class="fyMove" />
+            <img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
+            <div class="historyimg font" >孕产妇系统管理人数</div>
+          </div>
+          <div class="history1">
+            <div class="va">{{ data.fyglrs.etrs }}</div>
+            <img src="@/assets/images/hygiene/fy.png" alt="" />
+            <img src="@/assets/images/hygiene/fy2.png" alt="" class="fyMove" />
+            <img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
+            <div class="historyimg font" >0-6岁儿童系统管理人数</div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1" style="flex: 1.1">
+        <div class="yd_title service">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <eP7
+          :list="data.jktj.jktjrs"
+          :year="data.jktj.year"
+          v-if="showEchart"
+        ></eP7>
+      </div>
+      <div class="flex1">
+        <div class="yd_title last">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+
+        <div
+          class="table"
+          ref="mainRef"
+          @mouseenter="stopAutoScroll"
+          @mouseleave="startAutoScroll"
+        >
+          <div class="item" v-for="item in data.jkhd">
+            {{ item.jkhd }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ePie from "../echarts_hygiene/pie.vue";
+import ePie2 from "../echarts_hygiene/pie2.vue";
+import ePie3 from "../echarts_hygiene/pie3.vue";
+import ePie3_1 from "../echarts_hygiene/pie3_1.vue";
+import ePie4 from "../echarts_hygiene/pie4.vue";
+import eP2 from "../echarts_hygiene/eP2.vue";
+import eP3 from "../echarts_hygiene/eP3.vue";
+import eP7 from "../echarts_hygiene/eP7.vue";
+import eP6 from "../echarts_hygiene/eP6.vue";
+import eP5 from "../echarts_hygiene/eP5.vue";
+import eP4 from "../echarts_hygiene/eP4.vue";
+import eP4_1 from "../echarts_hygiene/eP4_1.vue";
+import tnb from "../echarts_hygiene/tnb.vue";
+import mfyyqk from "../echarts_hygiene/mfyyqk.vue";
+import { ref, reactive, onMounted, onBeforeMount } from "vue";
+import http from "@/utils/request.js";
+const lmb = ref("两慢病");
+const showEchart = ref(false);
+const leftchoose = ref({
+  first: "1",
+  second: "1",
+  third: "1",
+});
+const data = reactive({
+  medicalInsurance: {}, //医疗保险
+  lmb: {}, //两慢病
+  mfyyqk: [
+    { name: "2020", num: 1399947.19 },
+    { name: "2021", num: 4968369.09 },
+    { name: "2022", num: 6452334.81 },
+    { name: "2023", num: 7301560.28 },
+  ], //免费用药情况
+  mz: {}, //门诊住院
+  jkda: {}, //健康档案
+  jsbgl: [], //精神病管理
+  fyglrs: {}, //系统管理
+  jktj: {}, //65岁健康体检
+  jkhd: [], //健康活动
+  lxbx:{},//手工零星报销
+});
+const tabYd = ref([
+  {
+    choose: "异地就医人数",
+  },
+]);
+const changeYd = (name) => {
+  tabYd.value[0].choose = name;
+};
+const lmbqh = () => {
+  if (lmb.value == "两慢病") {
+    lmb.value = "免费用药情况";
+  } else {
+    lmb.value = "两慢病";
+  }
+};
+//
+const change2 = (name) => {
+    if (leftchoose.value[name] == "0") {
+    leftchoose.value[name] = "1";
+  } else {
+    leftchoose.value[name] = "0";
+  }
+};
+//自动滚动
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  if (!mainEl) {
+    // console.error("mainRef is not defined");
+    return;
+  }
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+
+onBeforeMount(async () => {
+  getData();
+});
+onMounted(() => {
+  setTimeout(() => {
+    startAutoScroll();
+  }, 600);
+
+  // console.log(
+  //   mainRef.value.scrollTop,
+  //   mainRef.value.scrollHeight,
+  //   mainRef.value.clientHeight
+  // );
+});
+const getData = async () => {
+  await http.get("/api/ggfwyth/health").then((res) => {
+    if (res.code == 200) {
+      data.medicalInsurance = res.data.medicalInsurance;
+      data.lmb = res.data.lmb;
+      data.mz = res.data.mz;
+      data.jkda = res.data.jkda;
+      data.jsbgl = res.data.jsbgl;
+      data.fyglrs = res.data.fyglrs;
+      data.jktj = res.data.jktj;
+      data.jkhd = res.data.jkhd;
+      data.lxbx = res.data.lxbx;
+      showEchart.value = true;
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.displayFlex {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // flex: 1;
+  width: 33.333333333%;
+}
+
+.flex1 {
+  flex: 1;
+  // padding: 0 28px;
+  box-sizing: border-box;
+}
+
+.flex2 {
+  // flex: 1;
+  // padding: 0 38px;
+  box-sizing: border-box;
+}
+
+.module11 {
+  display: flex;
+  width: 100%;
+//   margin-top: 112px;
+}
+
+.yd_title {
+  // background-image: url(@/assets/img_04.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  box-sizing: border-box;
+  width: 94%;
+  height: 42px;
+  position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+  }
+  .c {
+    width: 130px;
+    height: 42px;
+    cursor: pointer;
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+.familyPlanning {
+  width: 96%;
+  background-image: url(@/assets/images/hygiene/new_zcs.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.mechanism {
+  background-image: url(@/assets/images/hygiene/new_fygl.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.service {
+  background-image: url(@/assets/images/hygiene/new_tjrs.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.last {
+  background-image: url(@/assets/images/hygiene/new_jkhd.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.serviceBox {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .serviceimg {
+    width: 182px;
+    height: 35px;
+  }
+
+  .serviceTop {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 36px 0px 20px;
+    box-sizing: border-box;
+    .visit {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .medicalService {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .ylimg {
+        width: 200px;
+        height: 220px;
+      }
+
+      .medicalServiceTop {
+        position: relative;
+
+        span {
+          position: absolute;
+          left: 39px;
+          top: 35%;
+          font-weight: bold;
+          font-size: 32px;
+          color: #ffffff;
+          line-height: 41px;
+          letter-spacing: 1px;
+          text-align: center;
+          font-style: normal;
+          font-family: TCloudNumber, TCloudNumber;
+        }
+      }
+    }
+  }
+}
+.mealAssistance {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .mealAssistanceimg {
+    width: 495px;
+    height: 35px;
+  }
+}
+
+.left_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/hygiene/ylbx_ylbxffrc.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_1_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/hygiene/ylbx_ybsyje.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_1_xia {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .left_1_xia_item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .choose {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      margin-top: 5px;
+      margin-bottom: 5px;
+      margin-left: 35px;
+      .choose_1 {
+        cursor: pointer;
+        width: 124px;
+        height: 42px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        margin-right: 15px;
+        background-image: url(@/assets/images/hygiene/choose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .choose_2 {
+        cursor: pointer;
+        width: 124px;
+        height: 42px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        margin-right: 15px;
+        background-image: url(@/assets/images/hygiene/noChoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .historyimg {
+      margin-top: 10px;
+      padding: 0 25px;
+      background-image: url(@/assets/images/hygiene/xtgl_1.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      font-size: 15px;
+      color: #ffffff;
+      line-height: 21px;
+      letter-spacing: 2px;
+    }
+  }
+}
+// .left_2 {
+//   background-image: url(@/assets/images/hygiene/left_title_2.png);
+//   background-repeat: no-repeat;
+//   background-size: 100% 100%;
+// }
+
+.left_3 {
+  background-image: url(@/assets/images/hygiene/lmb.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+.left_3_1 {
+  background-image: url(@/assets/images/hygiene/mfyyqk.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+.center_1 {
+  width: 96%;
+  background-image: url(@/assets/images/hygiene/new_jkda.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_2 {
+  width: 96%;
+  background-image: url(@/assets/images/hygiene/new_mz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_top {
+  width: 95%;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .item {
+    display: flex;
+    align-items: center;
+    .left {
+      width: 102px;
+      height: 102px;
+    }
+    .right {
+      margin-left: 10px;
+      .right_top {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        letter-spacing: 2px;
+      }
+      .right_center {
+        width: 100px;
+        height: 7px;
+      }
+      .right_bottom {
+        margin-top: 3px;
+        padding: 5px;
+        font-size: 22px;
+        color: #2ef1ff;
+        line-height: 26px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+        background: linear-gradient(
+          270deg,
+          rgba(255, 255, 255, 0) 0%,
+          #3976a1 100%
+        );
+      }
+    }
+  }
+}
+.left_bg {
+  width: 520px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_bg {
+  width: 560px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 10px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.right_bg {
+  width: 520px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/right_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.basicInformation {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-top: 22px;
+
+  .basicInformation_item {
+    flex: 0 0 50%;
+    padding: 0 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      width: 79px;
+      height: 47px;
+    }
+
+    .right {
+      margin-left: 4px;
+
+      .label {
+        background-image: url(@/assets/img_11.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        margin-bottom: 4px;
+
+        span {
+          font-size: 12px;
+          font-weight: 400;
+          color: #eff0f1;
+          line-height: 19px;
+          margin-left: 2px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: bold;
+        color: #6acbff;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.visitLog {
+  .visitLog_item {
+    display: flex;
+    align-items: center;
+    background-image: url(@/assets/img_12.png);
+    background-size: 100% 100%;
+    margin-top: 16px;
+    padding: 15px 8px;
+    box-sizing: border-box;
+
+    img {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .visitLog_item_box {
+      flex: auto;
+
+      h4 {
+        font-size: 18px;
+        font-family: MicrosoftYaHei;
+        font-weight: bold;
+        color: #0096ff;
+        margin-bottom: 2px;
+      }
+
+      p {
+        font-size: 12px;
+        font-family: SourceHanSansCN;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 6px;
+      }
+    }
+
+    .check {
+      font-size: 12px;
+      font-family: SourceHanSansCN;
+      font-weight: 400;
+      color: #0096ff;
+      line-height: 20px;
+    }
+  }
+}
+
+.history {
+  height: 240px;
+  display: flex;
+  justify-content: space-around;
+  box-sizing: border-box;
+  .history1 {
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-style: normal;
+    font-family: PangMenZhengDao;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    .fyMove {
+      position: absolute;
+      top: 60px;
+      width: 60px;
+      height: 64px;
+      animation: example 3s infinite linear;
+    }
+    @keyframes example {
+      0% {
+        transform: translateY(0);
+      }
+      25% {
+        transform: translateY(-4px);
+      }
+      50% {
+        transform: translateY(0);
+      }
+      75% {
+        transform: translateY(4px);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
+    .va {
+      margin-top: 27px;
+      margin-bottom: 10px;
+      font-family: TCloudNumber, TCloudNumber;
+
+      font-size: 26px;
+      color: #ffffff;
+      line-height: 30px;
+      letter-spacing: 1px;
+      text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
+      text-align: right;
+      font-style: normal;
+    }
+    img {
+      width: 110px;
+      height: 110px;
+    }
+
+    .historyimg {
+      margin-top: 10px;
+      padding: 0 25px;
+      background-image: url(@/assets/images/hygiene/xtgl_1.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      font-size: 15px;
+      color: #ffffff;
+      line-height: 21px;
+      letter-spacing: 2px;
+    }
+    .historyMoveImg {
+      position: absolute;
+      top: 60px;
+      width: 180px;
+      height: 120px;
+    }
+  }
+  img {
+    width: 154px;
+    height: 136px;
+  }
+
+  p {
+    margin-top: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 28px;
+    border-bottom: 13px solid rgba(57, 59, 109, 1);
+  }
+}
+
+.concernLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 20px;
+
+  span {
+    text-align: center;
+    background: rgba(0, 89, 130, 0.73);
+    border-radius: 10px;
+    width: 118px;
+    height: 49px;
+    line-height: 49px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #ffffff;
+    margin: 0 10px;
+  }
+}
+
+.property {
+  display: flex;
+  padding: 14px 0 10px;
+
+  .property_box {
+    //background-image: url(@/assets/img_05.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 179px;
+    height: 91px;
+    margin: 0 12px;
+    text-align: center;
+
+    h5 {
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      margin: 9px 0 16px;
+    }
+
+    p {
+      font-size: 21px;
+      font-weight: bold;
+      color: #48ece7;
+    }
+  }
+}
+
+.activity {
+  h5 {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 164, 250, 0.8);
+    line-height: 47px;
+    border-bottom: 2px solid rgba(0, 164, 250, 1);
+    margin-bottom: 17px;
+  }
+
+  .activity_content {
+    margin: 0 -6px 12px;
+    display: flex;
+
+    .activity_box {
+      width: 50%;
+      display: inline-block;
+      margin: 0 6px;
+      box-sizing: border-box;
+      background-color: rgba(15, 28, 54, 1);
+      padding: 12px 12px 19px;
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 27px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.monitor {
+  .monitor_box {
+    display: flex;
+    padding: 8px 0;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
+    img {
+      width: 115px;
+      height: 84px;
+      margin-right: 21px;
+    }
+
+    .monitor_box_text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      h4 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #818181;
+        line-height: 23px;
+      }
+    }
+  }
+}
+.minTop {
+  height: 250px;
+  display: flex;
+  align-items: center;
+}
+.history2 {
+  font-size: 26px;
+  color: #ffffff;
+  line-height: 30px;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  font-family: PangMenZhengDao;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  .moveImg {
+    position: absolute;
+    top: 60px;
+    width: 64px;
+    height: 64px;
+    animation: example 3s infinite linear;
+  }
+  @keyframes example {
+    0% {
+      transform: translateY(0);
+    }
+    25% {
+      transform: translateY(-4px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    75% {
+      transform: translateY(4px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .moveImg2 {
+    position: absolute;
+    top: 70px;
+  }
+  .va {
+    margin-top: 27px;
+    margin-bottom: 20px;
+    font-family: TCloudNumber, TCloudNumber;
+    font-weight: bold;
+    font-size: 20px;
+    color: #ffffff;
+    line-height: 24px;
+    letter-spacing: 1px;
+    text-shadow: 0px 0px 23px rgba(0, 252, 255, 0.5);
+    text-align: center;
+    font-style: normal;
+  }
+  img {
+    width: 113px;
+    height: 121px;
+  }
+
+  .historyimg {
+    margin-top: 10px;
+    padding: 0 25px;
+    background-image: url(@/assets/images/hygiene/xtgl_1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    font-size: 15px;
+    color: #ffffff;
+    line-height: 21px;
+    letter-spacing: 2px;
+  }
+}
+.minTopPart2 {
+  margin-left: 5px;
+  width: 420px;
+  height: 136px;
+  background-image: url(@/assets/images/hygiene/xia_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  align-items: center;
+  position: relative;
+  display: flex;
+  margin-top: 35px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  .left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 13px;
+    .leftImg {
+      width: 90px;
+      height: 90px;
+    }
+    .left_me {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+
+      .bo {
+        margin-top: 5px;
+        font-family: TCloudNumber, TCloudNumber;
+        font-weight: bold;
+        font-size: 18px;
+        color: #00fffc;
+        line-height: 21px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+      }
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+
+    .rightImg {
+      width: 90px;
+      height: 90px;
+    }
+    .right_me {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+      .bo {
+        margin-top: 5px;
+        font-family: TCloudNumber, TCloudNumber;
+        font-weight: bold;
+        font-size: 18px;
+        color: #ffe92c;
+        line-height: 21px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+      }
+    }
+  }
+}
+.table {
+  box-sizing: border-box;
+  margin-top: 10px;
+  width: 95%;
+  height: 240px;
+
+  overflow-y: auto;
+
+  .item {
+    width: 98%;
+    box-sizing: border-box;
+    margin-top: 10px;
+    padding: 16px 20px;
+    background-image: url(@/assets/images/hygiene/table_bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    color: #ffffff;
+  }
+}
+/* 滚动条整体部分 */
+.table::-webkit-scrollbar {
+  width: 5px;
+  // height: 10px;
+}
+/* 滚动槽 */
+.table::-webkit-scrollbar-track {
+  border-radius: 1px;
+  background: rgba(41, 157, 255, 0.56);
+  -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
+}
+/* 滚动条滑块样式 */
+.table::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border-radius: 6px;
+  background: rgba(41, 157, 255, 1);
+  -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
+}
+.sm_title_1 {
+  width: 196px;
+  height: 45px;
+  margin-left: 175px;
+  // background-image: url(@/assets/images/hygiene/tnbrs.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+.sm_title_2 {
+  width: 196px;
+  height: 45px;
+  margin-left: 175px;
+  // background-image: url(@/assets/images/hygiene/gxyrs.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+.font{
+  font-size: 18px !important;
+}
+</style>
diff --git a/src/view/table_gk/gk_work.vue b/src/view/table_gk/gk_work.vue
new file mode 100644
index 0000000..84196e7
--- /dev/null
+++ b/src/view/table_gk/gk_work.vue
@@ -0,0 +1,1307 @@
+<template>
+  <div class="module11">
+    <div class="displayFlex left_bg">
+      <div class="flex1">
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="choose">
+          <div
+            :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(0, '1')"
+          >
+            教育
+          </div>
+          <div
+            :class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(0, '2')"
+          >
+            医疗
+          </div>
+          <!-- <div
+            :class="jz[0].choose == '3' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(0, '3')"
+          >
+            就业
+          </div> -->
+        </div>
+        <eP1 :list="data.list2"></eP1>
+        <div class="choose">
+          <div
+            :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(1, '1')"
+          >
+            住房
+          </div>
+          <!-- <div
+            :class="jz[1].choose == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(1, '2')"
+          >
+            自然灾害
+          </div> -->
+          <div
+            :class="jz[1].choose == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(1, '2')"
+          >
+            临时救助
+          </div>
+        </div>
+        <eP2 :list="data.list"></eP2>
+      </div>
+    </div>
+    <div class="displayFlex center_bg">
+      <div class="flex1">
+        <div class="yd_title center_0">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="school">
+          <ePjz :list="data.totalAssistance" v-if="showEchart"></ePjz>
+        </div>
+      </div>
+      <div class="flex1">
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <eP3 :list="data.salvation" v-if="showEchart"></eP3>
+      </div>
+      <div class="flex1">
+        <div class="fundingBox">
+          <div class="funding">
+            <span
+              >一卡通财政补贴（补贴总额：{{
+                data.lifeAssistance.yktTotal
+              }}万元）</span
+            >
+            <span>金额(万元)</span>
+            <!-- <span>数据对比</span> -->
+          </div>
+          <div
+            class="rolling"
+            ref="mainRef"
+            @mouseenter="stopAutoScroll"
+            @mouseleave="startAutoScroll"
+          >
+            <div
+              v-for="(item, index) in data.lifeAssistance.subsidyInformation"
+              :key="index"
+              class="fundingContent"
+            >
+              <span class="spot">{{ item.btsx }}</span>
+              <span class="spot">{{ item.btje }}</span>
+              <!-- <span class="spot">70.88</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="flex1">
+        <div class="yd_title right_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="choose">
+          <div
+            :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(2, '1')"
+          >
+            困难残疾人
+          </div>
+          <div
+            :class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(2, '2')"
+          >
+            困难军人
+          </div>
+          <div
+            :class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(2, '3')"
+          >
+            困难职工
+          </div>
+        </div>
+        <eP6 v-if="jz[2].choose == '1' && showEchart" :list="data.list1"></eP6>
+        <eP4 v-else :list="data.list1"></eP4>
+      </div>
+      <div class="flex1">
+        <div class="yd_title right_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="dyh">
+          <div
+            class="czr-bj"
+            v-for="(item, index) in data.diversification.hszhxms"
+            :key="index"
+          >
+            <div class="czrBox">
+              <div>发起单位:</div>
+              <div>{{ item.fqdw }}</div>
+            </div>
+            <div class="czrBox">
+              <div>项目名称:</div>
+              <div>{{ item.xmmc }}</div>
+            </div>
+            <div class="czrBox">
+              <div>公众筹款金额(元):</div>
+              <div>{{ item.gzzcje }}</div>
+            </div>
+            <div class="czrBox">
+              <div>捐赠支出金额:</div>
+              <div>{{ item.jzzcje }}</div>
+            </div>
+            <div class="czrBox">
+              <div>捐赠人次:</div>
+              <div>{{ item.jzrc }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- <eBubble></eBubble> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+} from "vue";
+import eP1 from "../echarts_work/eP1.vue";
+import eP2 from "../echarts_work/eP2.vue";
+import eP3 from "../echarts_work/eP3.vue";
+import eP4 from "../echarts_work/eP4.vue";
+import eP5 from "../echarts_work/eP5.vue";
+import eP6 from "../echarts_work/eP6.vue";
+import ePjz from "../echarts_work/ePjz.vue";
+import http from "@/utils/request.js";
+// 专项&其他救助切换
+const zxjz = ref(true);
+const zxjzChange = () => {
+  zxjz.value = !zxjz.value;
+};
+// 救助tap切换
+const jz = ref([
+  {
+    choose: "1",
+  },
+  {
+    choose: "1",
+  },
+  {
+    choose: "1",
+  },
+]);
+
+const jzChange = (index, value) => {
+  jz.value[index].choose = value;
+  if (index === 0) {
+    data.list2 = value == "1" ? data.education : data.medical;
+    // console.log(value, data.education, data.medical);
+  } else if (index === 1) {
+    data.list = value === "1" ? data.housing : data.temporary;
+  } else if (index === 2) {
+    const listMap = {
+      1: data.disabilitySubsidies,
+      2: data.difficultSoldiers,
+      3: data.needyWorkers,
+    };
+    data.list1 = listMap[value];
+    if (value == 2) {
+      data.list1.name = "困难军人";
+    } else if (value == 3) {
+      data.list1.name = "困难职工";
+    }
+  }
+};
+
+const showEchart = ref(false);
+const data = reactive({
+  list: {},
+  list1: {},
+  list2: {},
+  education: {
+    data: [
+      {
+        nf: "2019", //救助年份
+        jzrs: "4202", //救助人数
+        jzje: "1523", //救助金额
+      },
+    ],
+    year: ["2019"],
+  }, //教育
+  medical: {
+    data: [
+      {
+        nf: "2019", //救助年份
+        jzrs: "4202", //救助人数
+        jzje: "1200", //救助金额
+      },
+    ],
+    year: ["2019"],
+  }, //医疗
+  housing: {
+    data: [
+      {
+        nf: "2019", //救助年份
+        jzrs: "4202", //救助人数
+        jzje: "1523", //救助金额
+      },
+    ],
+    year: ["2019"],
+  }, //住房
+  temporary: {
+    data: [
+      {
+        nf: "2019", //救助年份
+        jzrs: "4202", //救助人数
+        jzje: "1523", //救助金额
+      },
+    ],
+    year: ["2019"],
+  }, //临时救助
+  lifeAssistance: {
+    yktTotal: "11515620",
+    subsidyInformation: [
+      {
+        btsx: "80至99岁老人生活补助", //补贴事项
+        btje: "11515620", //补贴金额
+      },
+    ],
+  }, //一卡通
+  salvation: {
+    data: [
+      {
+        tkjzje: "868.4888", //特困救助金额
+        tkjzrs: "9430", //特困救助人数
+        dbjzrs: "9430", //低保救助人数
+        dbjzje: "868.4888", //低保救助金额
+        dibianJzrs: "2310", //低边救助人数
+      },
+    ],
+    month: ["1"],
+  }, //生活类救助模块
+  //困难残疾人补助信息
+  disabilitySubsidies: {
+    data: [
+      // {
+      //   nf: "2019", //补贴年份
+      //   jzrs: "62", //补贴人数
+      //   jzje: "6.24", //补贴金额 万元
+      // },
+    ],
+    month: ["1"],
+  },
+  //困难军人
+  difficultSoldiers: {
+    data: [
+      {
+        nf: "2019", //补贴年份
+        jzrs: "0", //补贴人数
+        jzje: "0", //补贴金额 万元
+      },
+    ],
+    year: ["2019"],
+  },
+  //困难职工补助信息
+  needyWorkers: {
+    data: [
+      {
+        nf: "2019", //补贴年份
+        jzrs: "0", //补贴人数
+        jzje: "0", //补贴金额 万元
+      },
+    ],
+    year: ["2019"],
+    name: "困难军人",
+  },
+  diversification: {
+    hszhxms: [
+      {
+        fqdw: "龙游县红十字会", //发起单位
+        xmmc: "防溺水设施配置", //项目名称
+        gzzcje: "10800.42", //公众筹款金额（元）
+        jzzcje: "0", //捐赠支出金额
+        jzrc: "444", //捐赠人次
+      },
+    ],
+  }, //多元化力量参与模块
+  totalAssistance: {
+    data: [],
+    year: [],
+  }, //救助概况
+});
+// 添加千位分隔符
+const addThousandSeparator = (numberString) => {
+  return parseInt(numberString.trim(), 10).toLocaleString("en-US");
+};
+
+const getData = async () => {
+  await http.get("/api/ggfwyth/succour").then((res) => {
+    if (res.code == 200) {
+      data.diversification.hszhxms = res.data.diversification.hszhxms;
+      // 专项救助模块
+      // 教育&医疗
+      data.education.data = res.data.specialAssistance.education.data;
+      data.education.year = res.data.specialAssistance.education.year;
+      data.list2 = data.education;
+
+      data.medical.data = res.data.specialAssistance.medical.data;
+      data.medical.year = res.data.specialAssistance.medical.year;
+      // 住房&临时救助
+      data.housing.data = res.data.specialAssistance.housing.data;
+      data.housing.year = res.data.specialAssistance.housing.year;
+      data.list = data.housing;
+      data.temporary.data = res.data.specialAssistance.temporary.data;
+      data.temporary.year = res.data.specialAssistance.temporary.year;
+      // 救助概况
+      data.totalAssistance.data = res.data.totalAssistance.data;
+      data.totalAssistance.year = res.data.totalAssistance.year;
+      // 生活类救助模块
+      // 一卡通补贴
+      data.lifeAssistance.yktTotal = addThousandSeparator(
+        String((res.data.lifeAssistance.yktTotal / 10000).toFixed(2))
+      );
+      data.lifeAssistance.subsidyInformation =
+        res.data.lifeAssistance.subsidyInformation;
+      res.data.lifeAssistance.subsidyInformation.forEach((item, index) => {
+        data.lifeAssistance.subsidyInformation[index].btje =
+          addThousandSeparator((item.btje / 10000).toFixed(2));
+      });
+      // 救助统计图
+      data.salvation = res.data.lifeAssistance.jz;
+      // 弱势群体补贴
+      // 困难残疾人&困难军人&困难职工
+      //困难残疾人
+      data.disabilitySubsidies.data =
+        res.data.underprivileged.disabilitySubsidies.data;
+      data.disabilitySubsidies.month =
+        res.data.underprivileged.disabilitySubsidies.month;
+      // 困难军人
+      data.difficultSoldiers.data =
+        res.data.underprivileged.difficultSoldiers.data;
+      data.difficultSoldiers.year =
+        res.data.underprivileged.difficultSoldiers.year;
+      // 困难职工
+      data.needyWorkers.data = res.data.underprivileged.needyWorkers.data;
+      data.needyWorkers.year = res.data.underprivileged.needyWorkers.year;
+      //初试默认残疾人
+      data.list1 = data.disabilitySubsidies;
+
+      // 多元化力量参与
+      data.diversification.hszhxms = res.data.diversification.hszhxms;
+      showEchart.value = true;
+    }
+  });
+};
+
+//自动滚动
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  if (!mainEl) {
+    // console.error("mainRef is not defined");
+    return;
+  }
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+
+const typeSwitching = ref(true);
+
+const toggleShow = () => {
+  typeSwitching.value = !typeSwitching.value;
+  const type = typeSwitching.value ? "1" : "2";
+  jz.value[2].choose = (jz.value[2].choose % 3) + 1;
+
+  jzChange(0, type);
+  jzChange(1, type);
+  jzChange(2, jz.value[2].choose);
+};
+
+let interval;
+const startAutoSwitching = () => {
+  interval = setInterval(toggleShow, 6000); // 每6秒切换一次
+};
+onMounted(() => {
+  setTimeout(() => {
+    startAutoScroll();
+  }, 600);
+  // startAutoSwitching();
+});
+
+onBeforeMount(() => {
+  getData();
+});
+onBeforeUnmount(() => {
+  clearInterval(interval); //清除定时器
+});
+</script>
+
+<style lang="scss" scoped>
+.displayFlex {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // flex: 1;
+  width: 30%;
+}
+
+.flex1 {
+  flex: 1;
+  // padding: 0 28px;
+  box-sizing: border-box;
+}
+
+.module11 {
+  display: flex;
+  width: 100%;
+//   margin-top: 112px;
+}
+
+.left_bg {
+  width: 520px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_bg {
+  width: 520px;
+  box-sizing: border-box;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.right_bg {
+  width: 540px;
+  box-sizing: border-box;
+  padding-right: 20px;
+  padding-left: 20px;
+  margin-left: 28px;
+  background-image: url(@/assets/images/right_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_1 {
+  background-image: url(@/assets/images/work/zxjz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_1_1 {
+  background-image: url(@/assets/images/work/new_qtjz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_2 {
+  background-image: url(@/assets/eduImg/title2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_0 {
+  background-image: url(@/assets/images/work/new_jzgk.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_1 {
+  background-image: url(@/assets/images/work/new_shljz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.right_1 {
+  background-image: url(@/assets/images/work/new_rsqt.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.right_2 {
+  background-image: url(@/assets/images/work/new_dyh.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.basicInformation {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-top: 22px;
+
+  .basicInformation_item {
+    flex: 0 0 50%;
+    padding: 0 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      width: 79px;
+      height: 47px;
+    }
+
+    .right {
+      margin-left: 4px;
+
+      .label {
+        background-image: url(@/assets/img_11.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        margin-bottom: 4px;
+
+        span {
+          font-size: 12px;
+          font-weight: 400;
+          color: #eff0f1;
+          line-height: 19px;
+          margin-left: 2px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: bold;
+        color: #6acbff;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.visitLog {
+  .visitLog_item {
+    display: flex;
+    align-items: center;
+    background-image: url(@/assets/img_12.png);
+    background-size: 100% 100%;
+    margin-top: 16px;
+    padding: 15px 8px;
+    box-sizing: border-box;
+
+    img {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .visitLog_item_box {
+      flex: auto;
+
+      h4 {
+        font-size: 18px;
+        font-family: MicrosoftYaHei;
+        font-weight: bold;
+        color: #0096ff;
+        margin-bottom: 2px;
+      }
+
+      p {
+        font-size: 12px;
+        font-family: SourceHanSansCN;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 6px;
+      }
+    }
+
+    .check {
+      font-size: 12px;
+      font-family: SourceHanSansCN;
+      font-weight: 400;
+      color: #0096ff;
+      line-height: 20px;
+    }
+  }
+}
+
+.history {
+  padding-top: 12px;
+
+  p {
+    margin-top: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 28px;
+    border-bottom: 13px solid rgba(57, 59, 109, 1);
+  }
+}
+
+.concernLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 20px;
+
+  span {
+    text-align: center;
+    background: rgba(0, 89, 130, 0.73);
+    border-radius: 10px;
+    width: 118px;
+    height: 49px;
+    line-height: 49px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #ffffff;
+    margin: 0 10px;
+  }
+}
+
+.property {
+  display: flex;
+  padding: 14px 0 10px;
+
+  .property_box {
+    //background-image: url(@/assets/img_05.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 179px;
+    height: 91px;
+    margin: 0 12px;
+    text-align: center;
+
+    h5 {
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      margin: 9px 0 16px;
+    }
+
+    p {
+      font-size: 21px;
+      font-weight: bold;
+      color: #48ece7;
+    }
+  }
+}
+
+.activity {
+  h5 {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 164, 250, 0.8);
+    line-height: 47px;
+    border-bottom: 2px solid rgba(0, 164, 250, 1);
+    margin-bottom: 17px;
+  }
+
+  .activity_content {
+    margin: 0 -6px 12px;
+    display: flex;
+
+    .activity_box {
+      width: 50%;
+      display: inline-block;
+      margin: 0 6px;
+      box-sizing: border-box;
+      background-color: rgba(15, 28, 54, 1);
+      padding: 12px 12px 19px;
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 27px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.monitor {
+  .monitor_box {
+    display: flex;
+    padding: 8px 0;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
+    img {
+      width: 115px;
+      height: 84px;
+      margin-right: 21px;
+    }
+
+    .monitor_box_text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      h4 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #818181;
+        line-height: 23px;
+      }
+    }
+  }
+}
+
+.yd_title {
+  box-sizing: border-box;
+  width: 98%;
+  height: 42px;
+  position: relative;
+  overflow: hidden;
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 3px;
+  } /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+.choose {
+  display: flex;
+  justify-content: center;
+  margin-top: 47px;
+  margin-bottom: 20px;
+
+  .choose_1 {
+    cursor: pointer;
+    width: 124px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 22px;
+    margin-right: 15px;
+    background-image: url(@/assets/images/work/choose.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .choose_2 {
+    cursor: pointer;
+    width: 124px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 22px;
+    margin-right: 15px;
+    background-image: url(@/assets/images/work/noChoose.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.mechanism {
+  background-image: url(@/assets/YLTitle/titleImg10.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.flex11 {
+  padding: 12px 0;
+}
+
+.czr-sl {
+  display: flex;
+
+  .historyimg {
+    width: 255px;
+    height: 56px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: 70px;
+
+    span {
+      font-weight: 400;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 2px;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+      padding-right: 10px;
+    }
+  }
+
+  .historyimg1 {
+    background-image: url(@/assets/eduImg/jyImg14.png);
+    margin-right: 10px;
+  }
+
+  .historyimg2 {
+    background-image: url(@/assets/eduImg/jyImg15.png);
+  }
+}
+
+.earlyWarning {
+  height: calc(100% - 10px);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .earlyWarning1 {
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-style: normal;
+    font-family: PangMenZhengDao;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 136px;
+      height: 100px;
+    }
+
+    .green {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+      background-image: linear-gradient(180deg, #7be546 0%, #38ffb1 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .yellow {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+      background-image: linear-gradient(180deg, #ee8404 0%, #efd404 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .red {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+      background-image: linear-gradient(180deg, #ff3e00 0%, #ed5a2d 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .historyimg {
+      width: 133px;
+      height: 19px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        font-weight: 500;
+        font-size: 14px;
+        color: #ffffff;
+        letter-spacing: 4px;
+        font-style: normal;
+        font-family: PingFangSC, PingFang SC;
+      }
+    }
+
+    .historyimg1 {
+      background-image: url(@/assets/eduImg/jyImg4.png);
+    }
+
+    .historyimg2 {
+      background-image: url(@/assets/eduImg/jyImg6.png);
+    }
+
+    .historyimg3 {
+      background-image: url(@/assets/eduImg/jyImg5.png);
+    }
+  }
+}
+
+.dyh {
+  margin-top: 10px;
+  overflow: hidden;
+  height: 380px;
+  overflow-y: auto;
+  width: 100%;
+
+  .czr-bj {
+    width: 400px;
+    // height: calc(100% - 26px);
+    background: rgba(0, 103, 165, 0.18);
+    box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
+    border-radius: 2px;
+    padding: 20px 26px 1px 32px;
+    margin: 0 auto 12px;
+    // box-sizing: border-box;
+
+    .czrBox {
+      height: 22px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 3px;
+      text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.school {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.fundingBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .funding {
+    width: 520px;
+    height: 34px;
+    margin-top: 20px;
+    // padding: 10px 0 14px 0;
+    box-sizing: border-box;
+    background-image: url(@/assets/eduImg/jyImg17.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    // align-items: center;
+    // justify-content: center;
+    // flex-direction: column;
+    // justify-content: space-between;
+    span {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 3px;
+    }
+  }
+
+  .rolling {
+    width: 100%;
+    height: 200px;
+    // height: calc(100% - 26px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 6px;
+
+    .fundingContent {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-top: 10px;
+      width: 92%;
+      // height: 34px;
+      padding: 4px 0;
+      box-sizing: border-box;
+      background-image: url(@/assets/eduImg/jyImg16.png);
+
+      span {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        width: 78%;
+        padding-left: 38px;
+      }
+
+      span:nth-child(2) {
+        width: 22%;
+        // padding-left: 50px;
+      }
+    }
+  }
+}
+
+.rating {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .ratingBtn {
+    display: flex;
+    // align-items: center;
+
+    .onImg {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg19.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+      /* 添加指针样式以指示可点击 */
+    }
+
+    .ratingImg {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg18.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .onImg.active {
+      width: 62px;
+      height: 29px;
+      background-image: url(@/assets/eduImg/jyImg18.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+
+    span {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 1px;
+      font-family: PingFangSC, PingFang SC;
+    }
+  }
+}
+
+.selectLint {
+  width: 94%;
+  display: flex;
+  margin: 30px 0 10px;
+  justify-content: space-between;
+
+  .selectBox {
+    width: 48%;
+    background-image: url(@/assets/eduImg/jyImg7.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.dyh::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+/* 滚动条整体部分 */
+.rolling::-webkit-scrollbar {
+  width: 5px;
+  // height: 10px;
+}
+
+/* 滚动槽 */
+.rolling::-webkit-scrollbar-track {
+  border-radius: 1px;
+  background: rgba(0, 128, 231, 0.56);
+  -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
+}
+
+/* 滚动条滑块样式 */
+.rolling::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border-radius: 6px;
+  background: rgba(0, 162, 231, 1);
+  -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
+}
+</style>
diff --git a/src/view/table_gk/gk_yl.vue b/src/view/table_gk/gk_yl.vue
new file mode 100644
index 0000000..fc900ec
--- /dev/null
+++ b/src/view/table_gk/gk_yl.vue
@@ -0,0 +1,1538 @@
+<template>
+  <div class="module11">
+    <div class="displayFlex left_bg">
+      <div class="flex1">
+        <div
+          class="yd_title"
+          :class="leftchoose.first == '1' ? 'left_1' : 'left_1_1'"
+          @click="change2('first')"
+        >
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          <!-- <span class="text">
+            <img
+              v-if="leftchoose.first == '1'"
+              src="@/assets/images/ylbx_1.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/ylbx_1_1.png"
+              class="c"
+              @click="change('first', '1')"
+            />
+            <img
+              v-if="leftchoose.first == '2'"
+              src="@/assets/images/ylbx_1.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/ylbx_2_1.png"
+              class="c"
+              @click="change('first', '2')"
+              style="height: 35px; width: 120px; margin-right: 10px"
+            />
+          </span> -->
+        </div>
+        <ePie
+          v-if="leftchoose.first == '1' && showEchart"
+          :list1="data.leftTop1"
+          :list2="data.leftTop2"
+          :year="data.leftTopYear"
+        ></ePie>
+        <ePie2
+          v-else
+          :list1="data.leftTop3"
+          :list2="data.leftTop4"
+          :year="data.leftTopYear"
+        ></ePie2>
+      </div>
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title "       :class="leftchoose.second == '1' ? 'left_2' : 'left_2_1'"
+          @click="change2('second')">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          <!-- <span class="text">
+            <img
+              v-if="leftchoose.second == '1'"
+              src="@/assets/images/gllrbt_1.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/gllrbt_1_1.png"
+              class="c"
+              @click="change('second', '1')"
+            />
+            <img
+              v-if="leftchoose.second == '2'"
+              src="@/assets/images/gllrbt_2.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/gllrbt_2_1.png"
+              class="c"
+              @click="change('second', '2')"
+            />
+          </span> -->
+        </div>
+        <eP2
+          v-if="leftchoose.second == '1' && showEchart"
+          :list1="data.leftCenter1"
+          :list2="data.leftCenter2"
+          :year="data.leftCenterYear"
+        ></eP2>
+        <eP2_2
+          v-else
+          :list1="data.leftCenter3"
+          :list2="data.leftCenter4"
+          :year="data.leftCenterYear"
+        />
+      </div>
+      <div class="flex1" style="margin-top: 10px">
+        <div
+          class="yd_title"
+          :class="leftchoose.third == '1' ? 'left_3' : 'left_3_1'"
+          @click="change2('third')"
+        >
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          <!-- <span class="text">
+            <img
+              v-if="leftchoose.third == '1'"
+              src="@/assets/images/tkjz_1.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/tkjz_1_1.png"
+              class="c"
+              @click="change('third', '1')"
+            />
+            <img
+              v-if="leftchoose.third == '2'"
+              src="@/assets/images/tkjz_2.png"
+              class="c"
+              style="width: 160px"
+            />
+            <img
+              v-else
+              src="@/assets/images/tkjz_2_1.png"
+              class="c"
+              @click="change('third', '2')"
+            />
+          </span> -->
+        </div>
+        <eP3
+          v-if="leftchoose.third == '1' && showEchart"
+          :list1="data.leftbottom1"
+          :list2="data.leftbottom2"
+          :year="data.leftbottomYear"
+        ></eP3>
+        <eP3_2
+          v-else
+          :list1="data.leftbottom3"
+          :list2="data.leftbottom4"
+          :year="data.leftbottomYear"
+        ></eP3_2>
+      </div>
+    </div>
+    <div class="displayFlex center_bg">
+      <div class="flex1">
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="minTopPart">
+          <div class="moveImg"></div>
+          <div class="mtpImg1"></div>
+          <div class="mtpImg2"></div>
+          <div class="mtpImg3"></div>
+          <div class="mtpText1">{{ data.oldAgeTotal }}</div>
+          <div class="mtpText2">{{ data.oldAgePercent }}%</div>
+        </div>
+        <div class="ageGroup">
+          <div class="ageGroupBj">
+            <div class="Gendern"></div>
+            <div class="Male">男性总人数</div>
+            <div class="ageGroupNum">{{ data.ylLnrkgk.rkzsman }}</div>
+          </div>
+          <div class="ageGroupBj">
+            <div class="Genderv"></div>
+            <div class="Male">女性总人数</div>
+            <div class="ageGroupNum">{{ data.ylLnrkgk.rkzswomen }}</div>
+          </div>
+        </div>
+        <div class="ageGroupone">
+          <ePie3d v-if="showEchart" :list="data.rkgk"></ePie3d>
+          <div class="btList" ref="mainRef">
+            <div class="btListding">
+              <span>各年龄段</span>
+              <span>总数/人</span>
+              <span>男性人数/人</span>
+              <span>女性人数/人</span>
+            </div>
+            <div class="btList_item" v-for="(item, index) in btList">
+              <div class="btList_item_color" :style="bt(index)"></div>
+              <div class="btList_item_value">
+                {{ item.name }}
+                <div
+                  class="btList_item_value1"
+                  v-for="(item1, index) in item.value"
+                >
+                  {{ item1 }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1">
+        <div class="yd_title familyPlanning">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <ylJHSY
+          v-if="showEchart"
+          :list1="data.centerBottom1"
+          :list2="data.centerBottom2"
+          :year="data.centerBottomYear"
+        ></ylJHSY>
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="flex1">
+        <div class="yd_title mechanism">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="history">
+          <div class="history1" @click="showMapDialog('养老机构')">
+            <div>
+              <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
+            </div>
+            <img src="@/assets/YLimg/ylimg11.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
+            <img src="@/assets/YLimg/yljg.gif" class="historyMoveImg" />
+          </div>
+          <!-- <div class="history1">
+            <div>
+              <span>239<span class="unit">个</span> </span>
+            </div>
+            <img src="@/assets/YLimg/ylimg3.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg6.png" alt="" />
+          </div> -->
+          <div
+            class="history1"
+            @click="
+              showDialog(
+                '居家养老服务照料中心',
+                '/api/ggfwyth/yljgzlzxList',
+                'num'
+              )
+            "
+          >
+            <div>
+              <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
+            </div>
+            <img src="@/assets/YLimg/ylimg12.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
+            <img src="@/assets/YLimg/yljg.gif" class="historyMoveImg" />
+          </div>
+        </div>
+      </div>
+      <div class="flex1">
+        <div class="yd_title service">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="serviceBox">
+          <div class="serviceTop">
+            <div class="visit">
+              <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
+              <ylSMFW v-if="showEchart" :list="data.smfwcs"></ylSMFW>
+            </div>
+            <div class="medicalService">
+              <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
+              <img class="moveYl" src="@/assets/YLimg/turn.gif" alt="" />
+              <div class="medicalServiceTop">
+                <img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
+                <span>36,234</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1">
+        <div class="mealAssistance">
+          <img
+            class="mealAssistanceimg"
+            src="@/assets/YLimg/ylimg7.png"
+            alt=""
+          />
+        </div>
+        <ylXZZC
+          v-if="showEchart"
+          :list1="data.zccs1"
+          :list2="data.zccs2"
+          @village="chooseVillage"
+        ></ylXZZC>
+      </div>
+    </div>
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :pagination="pagination"
+      @close="close"
+      @handle="handlePagination"
+    >
+      <template #iordertype="{ currentCol, currentData }">
+        <div v-if="currentData.iordertype == '1'">就餐订单</div>
+        <div v-else-if="currentData.iordertype == '2'">送餐订单</div>
+      </template>
+      <template #itimetype="{ currentCol, currentData }">
+        <div v-if="currentData.itimetype == '0'">早餐</div>
+        <div v-else-if="currentData.itimetype == '1'">中餐</div>
+        <div v-else-if="currentData.itimetype == '2'">晚餐</div>
+      </template>
+    </Dialog>
+    <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
+    </DialogMap>
+  </div>
+</template>
+
+<script setup>
+import ePie from "../echarts_yl/table_pie.vue";
+import eP2 from "../echarts_yl/eP2.vue";
+import eP2_2 from "../echarts_yl/eP2_2.vue";
+import eP3 from "../echarts_yl/eP3.vue";
+import eP3_2 from "../echarts_yl/eP3_2.vue";
+import ePie2 from "../echarts_yl/pie2.vue";
+import eGraph from "../echarts_yl/graph.vue";
+import ePie3d from "../echarts_yl/pie3d.vue";
+import ylJHSY from "../echarts_yl/ylJHSY.vue";
+import ylSMFW from "../echarts_yl/ylSMFW.vue";
+import ylXZZC from "../echarts_yl/ylXZZC.vue";
+import Dialog from "../dialog/dialog.vue";
+import DialogMap from "../dialog/dialogMap.vue";
+import { ref, onMounted, onBeforeMount, reactive, computed } from "vue";
+import http from "@/utils/request.js";
+const leftchoose = ref({
+  first: "1",
+  second: "1",
+  third: "1",
+});
+const showEchart = ref(false);
+// 详情弹框
+const dialogShow = ref(false);
+const dialogShowMap = ref(false);
+const mapTitle = ref("");
+const tableType = reactive({
+  url: "",
+  title: "",
+  columns: [],
+  data: [],
+});
+const xz_column = ref([
+  {
+    label: "照料中心",
+    property: "sdailycarecentername",
+    width: "160",
+  },
+  {
+    label: "老人名称",
+    property: "scustomername",
+    width: "120",
+  },
+  {
+    label: "就餐/送餐订单",
+    property: "iordertype",
+    width: "140",
+    type: "slot",
+  },
+  {
+    label: "早、中、晚餐",
+    property: "itimetype",
+    width: "140",
+    type: "slot",
+  },
+  {
+    label: "菜品信息",
+    property: "dishesmealnames",
+    width: "160",
+  },
+  {
+    label: "订单金额",
+    property: "totalprice",
+    width: "120",
+  },
+  {
+    label: "实际支付金额",
+    property: "actualprice",
+    width: "120",
+  },
+  {
+    label: "订单结束时间",
+    property: "dtfinishtime",
+  },
+]);
+const yl_column = ref([
+  {
+    label: "机构名称",
+    property: "mc",
+    align: "left",
+  },
+  {
+    label: "机构地址",
+    property: "dz",
+  },
+  {
+    label: "老人数量",
+    property: "rzlrsl",
+  },
+]);
+const yl_column2 = ref([
+  {
+    label: "机构名称",
+    property: "mc",
+  },
+  {
+    label: "机构地址",
+    property: "dz",
+  },
+]);
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+const change = (name, index) => {
+  leftchoose.value[name] = index;
+};
+const change2 = (name) => {
+  if (leftchoose.value[name] == "0") {
+    leftchoose.value[name] = "1";
+  } else {
+    leftchoose.value[name] = "0";
+  }
+};
+const chooseVillage = (village) => {
+  tableType.title = village;
+  tableType.columns = xz_column.value;
+  tableType.url = "/api/ggfwyth/zcxxList";
+  getTownDetail();
+};
+const showDialog = (title, url, coulumn) => {
+  tableType.title = title;
+  tableType.url = url;
+  if (coulumn == "num") {
+    tableType.columns = yl_column2.value;
+  } else {
+    tableType.columns = yl_column.value;
+  }
+
+  getTable(url, pagination.currentPage);
+};
+//养老机构地图
+const showMapDialog = (title) => {
+  mapTitle.value = title;
+  dialogShowMap.value = true;
+};
+//获取表格数据
+const getTable = (url, currentPage) => {
+  http
+    .get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
+    .then((res) => {
+      if (res.code == 200) {
+        tableType.data = res.data;
+        pagination.total = res.count;
+        dialogShow.value = true;
+      }
+    });
+};
+const close = () => {
+  dialogShow.value = false;
+  dialogShowMap.value = false;
+  pagination.currentPage = 1;
+  pagination.total = 100;
+};
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+  if (tableType.url == "/api/ggfwyth/zcxxList") {
+    getTownDetail();
+  } else {
+    getTable(tableType.url, pagination.currentPage);
+  }
+};
+const getTownDetail = () => {
+  let params = {
+    scasecadebareaname: tableType.title,
+    page: pagination.currentPage,
+    size: pagination.pageSize,
+  };
+  http.get("/api/ggfwyth/zcxxList", params).then((res) => {
+    if (res.code == 200) {
+      pagination.total = res.count;
+      tableType.data = res.data;
+      dialogShow.value = true;
+    }
+  });
+};
+const btList = ref([
+  {
+    name: "61-70岁",
+    value: ["17824", "17824", "17824"],
+  },
+  {
+    name: "71-80岁",
+    value: ["18742", "18742", "18742"],
+  },
+  {
+    name: "81-90岁",
+    value: ["3407", "3407", "3407"],
+  },
+  {
+    name: "91-100岁",
+    value: ["144", "144", "144"],
+  },
+  {
+    name: "100岁以上",
+    value: ["10", "10", "10"],
+  },
+]);
+const ageGroups = [
+  { ageRange: "6170", index: 0 },
+  { ageRange: "7180", index: 1 },
+  { ageRange: "8190", index: 2 },
+  { ageRange: "91100", index: 3 },
+  { ageRange: "100", index: 4 },
+];
+//扇形图颜色数据
+const colorList = [
+  { color2: "#FFE35F" },
+  { color2: "#0081FF" },
+  { color2: "#8ABEDB" },
+  { color2: "#25B9C8" },
+  { color2: "#30EB92" },
+  { color2: "rgba(254,178,128,1)" },
+  { color2: "rgba(151,176,255,1)" },
+  { color2: "rgba(164,151,255,1)" },
+  { color2: "rgba(159,110,254,1)" },
+  { color2: "rgba(180,143,241,1)" },
+  { color2: "rgba(76,174,254,1)" },
+];
+const bt = computed(() => {
+  return (index) => {
+    let str = `--i:${colorList[index].color2}`;
+    return str;
+  };
+});
+const data = reactive({
+  leftTop1: [],
+  leftTop2: [],
+  leftTop3: [],
+  leftTop4: [],
+  leftTopYear: [],
+  leftCenter1: [],
+  leftCenter2: [],
+  leftCenter3: [],
+  leftCenter4: [],
+  leftCenterYear: [],
+  leftbottom1: [],
+  leftbottom2: [],
+  leftbottom3: [],
+  leftbottom4: [],
+  leftbottomYear: [],
+  oldAgePercent: "",
+  oldAgeTotal: "",
+  rkgk: {},
+  centerBottom1: [],
+  centerBottom2: [],
+  centerBottomYear: [],
+  yljgzlzx: { yljg: "", zlzx: "" },
+  zccs1: [],
+  zccs2: [],
+  smfwcs: {
+    data: [{ nf: "2024", yf: "5", rq: "22", fwcs: "16", sc: "22" }],
+    day: ["5.22"],
+  },
+  ylLnrkgk: {
+    rkzs: "390545",
+    rkzsman: "390545",
+    rkzswomen: "390545",
+    man6170: "28896",
+    man7180: "20001",
+    man8190: "5619",
+    man91100: "754",
+    man100: "8",
+    women6170: "28905",
+    women7180: "20835",
+    women8190: "5646",
+    women91100: "1155",
+    women100: "19",
+  },
+});
+
+onBeforeMount(() => {
+  getData();
+});
+
+const getData = () => {
+  http.get("/api/ggfwyth/yl").then((res) => {
+    if (res.code == 200) {
+      // 养老保险
+      // 人次
+      res.data.endowmentInsurance.ffrc.forEach((element) => {
+        data.leftTop1.push(element.zgffrc);
+        data.leftTop2.push(element.cxffrc);
+      });
+      //金额
+      res.data.endowmentInsurance.ffje.forEach((element) => {
+        data.leftTop3.push(element.zgffje);
+        data.leftTop4.push(element.cxffje);
+      });
+      // 年份
+      data.leftTopYear = res.data.endowmentInsurance.year;
+      //高龄老人补贴
+      // 人次
+      res.data.oldAgeSubsidy.btrs.forEach((element) => {
+        data.leftCenter1.push(element.ninetyNinetyEight);
+        data.leftCenter2.push(element.ninetyNine);
+      });
+      //金额
+      res.data.oldAgeSubsidy.btje.forEach((element) => {
+        data.leftCenter3.push(element.ninetyNinetyEight);
+        data.leftCenter4.push(element.ninetyNine);
+      });
+      data.leftCenterYear = res.data.oldAgeSubsidy.year;
+      // 特困低保老人救助
+      // 人次
+      res.data.tkdbOldAge.tkdbffrc.forEach((element) => {
+        data.leftbottom1.push(element.tkjzrc);
+        data.leftbottom2.push(element.dbjzrc);
+      });
+      //金额
+      res.data.tkdbOldAge.tkdbffje.forEach((element) => {
+        data.leftbottom3.push(element.tkjzje);
+        data.leftbottom4.push(element.dbjzje);
+      });
+      // 年份
+      data.leftbottomYear = res.data.tkdbOldAge.year;
+      // 老年人各年龄及占比
+      data.oldAgePercent = res.data.lnrgnljzb.oldAgePercent;
+      data.oldAgeTotal = res.data.lnrgnljzb.oldAgeTotal;
+      data.rkgk = res.data.lnrgnljzb.rkgk;
+
+      // 更新 data.ylLnrkgk
+      data.ylLnrkgk = res.data.ylLnrkgk;
+      data.ylLnrkgk.rkzsman = ageGroups.reduce(
+        (acc, group) => acc + parseInt(data.ylLnrkgk[`man${group.ageRange}`]),
+        0
+      );
+      data.ylLnrkgk.rkzswomen = ageGroups.reduce(
+        (acc, group) => acc + parseInt(data.ylLnrkgk[`women${group.ageRange}`]),
+        0
+      );
+
+      // 更新 btList
+      ageGroups.forEach((group) => {
+        const manCount = parseInt(data.ylLnrkgk[`man${group.ageRange}`]);
+        const womenCount = parseInt(data.ylLnrkgk[`women${group.ageRange}`]);
+        btList.value[group.index].value[0] = manCount + womenCount;
+        btList.value[group.index].value[1] = manCount;
+        btList.value[group.index].value[2] = womenCount;
+      });
+
+      // 计划生育
+      res.data.familyPlanning.familyPlanningData.forEach((element) => {
+        data.centerBottom1.push(element.jhsyrs); // 人次
+        data.centerBottom2.push(element.jhsybtje / 10000); // 金额
+        // data.centerBottom2.push(element.jhsybtje); // 金额
+      });
+      // 年份
+      data.centerBottomYear = res.data.familyPlanning.year;
+      // 养老机构及照料中心
+      data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
+      data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
+      // 助老服务
+      data.smfwcs = res.data.zlfw.smfwcs;
+      // 乡镇助餐次数
+      let elements = res.data.zlfw.xzzccs;
+      // 先处理 zccs 不等于 0 的元素
+      elements.forEach((element) => {
+        if (element.zccs !== 0) {
+          data.zccs1.push(element.xzjd); // 地点
+          data.zccs2.push(element.zccs); // 次数
+        }
+      });
+      // 处理 zccs 等于 0 的元素
+      elements.forEach((element) => {
+        if (element.zccs === 0) {
+          data.zccs1.push(element.xzjd); // 地点
+          data.zccs2.push(element.zccs); // 次数
+        }
+      });
+    }
+    showEchart.value = true;
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.displayFlex {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // flex: 1;
+  width: 33.333333333%;
+}
+
+.flex1 {
+  flex: 1;
+  // padding: 0 28px;
+  box-sizing: border-box;
+}
+
+.flex2 {
+  // flex: 1;
+  // padding: 0 38px;
+  box-sizing: border-box;
+}
+
+.module11 {
+  display: flex;
+  width: 100%;
+  //   margin-top: 112px;
+}
+
+.yd_title {
+  // background-image: url(@/assets/img_04.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  box-sizing: border-box;
+  width: 94%;
+  height: 42px;
+  position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+    align-items: center;
+  }
+
+  .c {
+    width: 130px;
+    height: 42px;
+    cursor: pointer;
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+.familyPlanning {
+  background-image: url(@/assets/images/yl/new_jhsy.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.mechanism {
+  background-image: url(@/assets/images/yl/new_yljg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.service {
+  background-image: url(@/assets/images/yl/new_zlfw.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.serviceBox {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .serviceimg {
+    width: 165px;
+    height: 35px;
+  }
+
+  .serviceTop {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 36px 0px 0px;
+    box-sizing: border-box;
+
+    .visit {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .medicalService {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      .moveYl {
+        position: absolute;
+        width: 160px;
+        height: 160px;
+        top: 76px;
+      }
+
+      .ylimg {
+        margin-top: 40px;
+        width: 160px;
+        height: 190px;
+      }
+
+      .medicalServiceTop {
+        position: relative;
+        span {
+          position: absolute;
+          left: 40px;
+          top: 100px;
+          font-weight: bold;
+          font-size: 28px;
+          color: #ffffff;
+          line-height: 41px;
+          letter-spacing: 1px;
+          text-align: center;
+          font-style: normal;
+          font-family: TCloudNumber, TCloudNumber;
+        }
+      }
+    }
+  }
+}
+
+.mealAssistance {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .mealAssistanceimg {
+    width: 495px;
+    height: 35px;
+  }
+}
+
+.left_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/yl/ylbx_ylbxffrc.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_1_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/yl/ylbx_ylbxje.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_2 {
+  cursor: pointer;
+  background-image: url(@/assets/images/yl/gllrbt_btrc.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_2_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/yl/gllrbt_btje.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_3 {
+  cursor: pointer;
+  background-image: url(@/assets/images/yl/tkdb_ffrc.png);
+  //    background-image: url(@/assets/images/yl/new_tklrjz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_3_1 {
+  cursor: pointer;
+  background-image: url(@/assets/images/yl/tkdb_bzje.png);
+  //    background-image: url(@/assets/images/yl/new_tklrjz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_1 {
+  background-image: url(@/assets/images/yl/new_lnrzb.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_bg {
+  width: 520px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-right: 20px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_bg {
+  width: 560px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 10px;
+  margin-right: 20px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.right_bg {
+  width: 520px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-right: 20px;
+  background-image: url(@/assets/images/right_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.basicInformation {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-top: 22px;
+
+  .basicInformation_item {
+    flex: 0 0 50%;
+    padding: 0 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      width: 79px;
+      height: 47px;
+    }
+
+    .right {
+      margin-left: 4px;
+
+      .label {
+        background-image: url(@/assets/img_11.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        margin-bottom: 4px;
+
+        span {
+          font-size: 12px;
+          font-weight: 400;
+          color: #eff0f1;
+          line-height: 19px;
+          margin-left: 2px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: bold;
+        color: #6acbff;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.visitLog {
+  .visitLog_item {
+    display: flex;
+    align-items: center;
+    background-image: url(@/assets/img_12.png);
+    background-size: 100% 100%;
+    margin-top: 16px;
+    padding: 15px 8px;
+    box-sizing: border-box;
+
+    img {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .visitLog_item_box {
+      flex: auto;
+
+      h4 {
+        font-size: 18px;
+        font-family: MicrosoftYaHei;
+        font-weight: bold;
+        color: #0096ff;
+        margin-bottom: 2px;
+      }
+
+      p {
+        font-size: 12px;
+        font-family: SourceHanSansCN;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 6px;
+      }
+    }
+
+    .check {
+      font-size: 12px;
+      font-family: SourceHanSansCN;
+      font-weight: 400;
+      color: #0096ff;
+      line-height: 20px;
+    }
+  }
+}
+
+.history {
+  height: calc(100% - 36px);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .history1 {
+    cursor: pointer;
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-style: normal;
+    font-family: PangMenZhengDao;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    span {
+      font-family: PangMenZhengDao;
+      font-size: 26px;
+      color: #ffffff;
+      letter-spacing: 1px;
+      text-align: center;
+      font-style: normal;
+      margin-left: 4px;
+    }
+    .unit {
+      font-weight: 500;
+      font-size: 14px;
+      color: #9cdeff;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+    }
+
+    .historyimg {
+      width: 182px;
+      height: 35px;
+    }
+    .historyMoveImg {
+      position: absolute;
+      left: 10px;
+      top: 37px;
+      width: 160px;
+      height: 120px;
+    }
+  }
+
+  img {
+    width: 154px;
+    height: 136px;
+  }
+
+  p {
+    margin-top: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 28px;
+    border-bottom: 13px solid rgba(57, 59, 109, 1);
+  }
+}
+
+.concernLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 20px;
+
+  span {
+    text-align: center;
+    background: rgba(0, 89, 130, 0.73);
+    border-radius: 10px;
+    width: 118px;
+    height: 49px;
+    line-height: 49px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #ffffff;
+    margin: 0 10px;
+  }
+}
+
+.property {
+  display: flex;
+  padding: 14px 0 10px;
+
+  .property_box {
+    //background-image: url(@/assets/img_05.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 179px;
+    height: 91px;
+    margin: 0 12px;
+    text-align: center;
+
+    h5 {
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      margin: 9px 0 16px;
+    }
+
+    p {
+      font-size: 21px;
+      font-weight: bold;
+      color: #48ece7;
+    }
+  }
+}
+
+.activity {
+  h5 {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 164, 250, 0.8);
+    line-height: 47px;
+    border-bottom: 2px solid rgba(0, 164, 250, 1);
+    margin-bottom: 17px;
+  }
+
+  .activity_content {
+    margin: 0 -6px 12px;
+    display: flex;
+
+    .activity_box {
+      width: 50%;
+      display: inline-block;
+      margin: 0 6px;
+      box-sizing: border-box;
+      background-color: rgba(15, 28, 54, 1);
+      padding: 12px 12px 19px;
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 27px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.monitor {
+  .monitor_box {
+    display: flex;
+    padding: 8px 0;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
+    img {
+      width: 115px;
+      height: 84px;
+      margin-right: 21px;
+    }
+
+    .monitor_box_text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      h4 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #818181;
+        line-height: 23px;
+      }
+    }
+  }
+}
+
+.minTopPart {
+  width: 500px;
+  height: 174px;
+  background-image: url(@/assets/minTopBg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 4px auto;
+  margin-top: 10px;
+  // margin-bottom: 14px;
+  position: relative;
+
+  .moveImg {
+    position: absolute;
+    background-image: url(@/assets/ylMove.gif);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    left: 155px;
+    width: 190px;
+    height: 173px;
+  }
+
+  .mtpImg1 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop1.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    left: 23px;
+  }
+
+  .mtpImg2 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    right: 23px;
+  }
+
+  .mtpImg3 {
+    width: 125px;
+    height: 36px;
+    background-image: url(@/assets/minTop3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 350px;
+    left: 20px;
+  }
+
+  .mtpText1 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    left: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #ffffff;
+  }
+
+  .mtpText2 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    right: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #ffffff;
+  }
+}
+.ageGroup {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+  height: 50px;
+  margin-left: 10px;
+
+  .ageGroupBj {
+    width: 235px;
+    height: 50px;
+    background-image: url(@/assets/images/yl/ylnlbj.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    .Gendern {
+      width: 34px;
+      height: 34px;
+      background-image: url(@/assets/images/yl/ylnln.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-right: 12px;
+      margin-left: 14px;
+    }
+    .Genderv {
+      width: 34px;
+      height: 34px;
+      background-image: url(@/assets/images/yl/ylnlv.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-right: 12px;
+      margin-left: 14px;
+    }
+    .Male {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 16px;
+      color: #ffffff;
+      letter-spacing: 2px;
+      text-align: left;
+      font-style: normal;
+      margin-right: 18px;
+    }
+
+    .ageGroupNum {
+      font-size: 16px;
+      font-weight: 400;
+      color: #00fff0;
+      letter-spacing: 1px;
+      text-align: right;
+      font-style: normal;
+      font-family: TCloudNumber, TCloudNumber;
+    }
+  }
+}
+.ageGroupone {
+  display: flex;
+  justify-content: flex-end;
+  .btList {
+    width: 70%;
+    height: 200px;
+    margin-top: 10px;
+    margin-right: 8px;
+    .btListding {
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      span {
+        width: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      span:nth-child(3) {
+        width: 25%;
+      }
+      span:nth-child(4) {
+        width: 25%;
+      }
+    }
+    .btList_item {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 5px;
+
+      .btList_item_color {
+        width: 22px;
+        height: 8px;
+        background-color: var(--i);
+        border-radius: 6px;
+        margin-right: 17px;
+      }
+      .btList_item_value {
+        width: 100%;
+        font-size: 18px;
+        color: #ffffff;
+        display: flex;
+        justify-content: space-between;
+      }
+      .btList_item_value1 {
+        width: 24%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1);
+
+  --el-table-border-color: none;
+  border: 1px solid #7aceff;
+}
+.table {
+  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+    border: none !important;
+    padding-left: 10px !important;
+  }
+
+  :deep(.el-table td.el-table__cell) {
+    padding-left: 10px;
+  }
+}
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: #2f4b74;
+}
+
+:deep(.el-table__empty-block) {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
+</style>
diff --git a/src/view/yl.vue b/src/view/yl.vue
index 90a6138..38294a8 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -217,10 +217,7 @@
           </div>
         </div>
         <div class="history">
-          <div
-            class="history1"
-            @click="showMapDialog('养老机构')"
-          >
+          <div class="history1" @click="showMapDialog('养老机构')">
             <div>
               <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
             </div>
@@ -313,7 +310,7 @@
         <div v-else-if="currentData.itimetype == '2'">晚餐</div>
       </template>
     </Dialog>
-        <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
+    <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
     </DialogMap>
   </div>
 </template>
@@ -445,10 +442,10 @@ const showDialog = (title, url, coulumn) => {
   getTable(url, pagination.currentPage);
 };
 //养老机构地图
-const showMapDialog =(title)=>{
+const showMapDialog = (title) => {
   mapTitle.value = title;
   dialogShowMap.value = true;
-}
+};
 //获取表格数据
 const getTable = (url, currentPage) => {
   http
@@ -657,7 +654,7 @@ const getData = () => {
       // 计划生育
       res.data.familyPlanning.familyPlanningData.forEach((element) => {
         data.centerBottom1.push(element.jhsyrs); // 人次
-        data.centerBottom2.push((element.jhsybtje / 10000)); // 金额
+        data.centerBottom2.push(element.jhsybtje / 10000); // 金额
         // data.centerBottom2.push(element.jhsybtje); // 金额
       });
       // 年份
@@ -668,9 +665,20 @@ const getData = () => {
       // 助老服务
       data.smfwcs = res.data.zlfw.smfwcs;
       // 乡镇助餐次数
-      res.data.zlfw.xzzccs.forEach((element) => {
-        data.zccs1.push(element.xzjd); // 地点
-        data.zccs2.push(element.zccs); // 次数
+      let elements = res.data.zlfw.xzzccs;
+      // 先处理 zccs 不等于 0 的元素
+      elements.forEach((element) => {
+        if (element.zccs !== 0) {
+          data.zccs1.push(element.xzjd); // 地点
+          data.zccs2.push(element.zccs); // 次数
+        }
+      });
+      // 处理 zccs 等于 0 的元素
+      elements.forEach((element) => {
+        if (element.zccs === 0) {
+          data.zccs1.push(element.xzjd); // 地点
+          data.zccs2.push(element.zccs); // 次数
+        }
       });
     }
     showEchart.value = true;