From f4739af199eb521b75227e680011e3832b1e1ed2 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Fri, 18 Oct 2024 15:22:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=8F=E6=9C=89=E6=89=80=E5=B1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/echarts_jz/dialog_bzxzf.vue | 446 +++++++++++++++++++++++++++
 src/view/echarts_jz/eP2.vue          | 108 ++-----
 src/view/sy_map.vue                  | 158 +++++++---
 src/view/table_gk/gk_jz.vue          | 273 ++++++++++++++--
 4 files changed, 818 insertions(+), 167 deletions(-)
 create mode 100644 src/view/echarts_jz/dialog_bzxzf.vue

diff --git a/src/view/echarts_jz/dialog_bzxzf.vue b/src/view/echarts_jz/dialog_bzxzf.vue
new file mode 100644
index 0000000..02b828c
--- /dev/null
+++ b/src/view/echarts_jz/dialog_bzxzf.vue
@@ -0,0 +1,446 @@
+<template>
+    <div ref="chart" style="width: 96%; height: 100%"></div>
+  </template>
+  
+  <script setup>
+  import { onMounted, onBeforeMount, reactive, ref } from "vue";
+  // 局部引入echarts核心模块
+  import * as echarts from "echarts";
+  const emit = defineEmits(["shuju"]);
+  const props = defineProps({
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
+  
+  const chart = ref(); // 创建DOM引用
+  
+  const colors = [
+
+    {
+      left: "rgba(60, 143, 255, .16)",
+      right: "rgba(60, 143, 255, .6)",
+      top: "rgba(60, 143, 255, 1)",
+      bottom: "rgba(60, 143, 255, .46)",
+      front: "rgba(60, 143, 255, .66)",
+    },
+  ];
+  const maxList = ref([]);
+  // const valueList = [20, 53, 47, 65, 29, 11, 10];
+  const data = reactive({
+    list: [],
+    option: {},
+    Max: 200,
+    valueList: [20, 53, 47, 65, 29, 11, 10],
+    xxname: [
+   
+    ],
+  });
+  // 注册5个面图形:左侧、前面、右面、上面、下面
+  //c0:左下角，c1：右下角,c2:右上角，c3：左上角
+  // 绘制左侧面-ok rgba(103, 180, 233, 0.04)
+  const CubeLeft_1 = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      // 会canvas的应该都能看得懂，shape是从custom传入的
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x - 20, shape.y];
+      const c1 = [shape.x - 7, shape.y - 14];
+      const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
+      const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+    },
+  });
+  const CubeFront_1 = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      // 会canvas的应该都能看得懂，shape是从custom传入的
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x - 20, shape.y];
+      const c1 = [shape.x + 2, shape.y];
+      const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+    },
+  });
+  const CubeRight_1 = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x + 2, shape.y];
+      const c1 = [shape.x + 15, shape.y - 14];
+      const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
+      const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+    },
+  });
+  const CubeTop_1 = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const c0 = [shape.x - 20, shape.y];
+      const c1 = [shape.x + 2, shape.y];
+      const c2 = [shape.x + 15, shape.y - 14];
+      const c3 = [shape.x - 7, shape.y - 14];
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+    },
+  });
+  const CubeBottom_1 = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      // 会canvas的应该都能看得懂，shape是从custom传入的
+      const xAxisPoint = shape.xAxisPoint;
+  
+      const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
+      const c1 = [xAxisPoint[0] + 2, xAxisPoint[1]];
+      const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
+      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
+  
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+    },
+  });
+  
+  echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
+  echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
+  echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
+  echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
+  echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
+  const getOption = () => {
+    data.option = {
+      tooltip: {
+        trigger: "axis",
+        formatter: "{b0}:{c1}",
+      },
+      grid: {
+        left: 10,
+        right: 0,
+        bottom: 10,
+        top: 40,
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: data.xxname,
+          axisLine: {
+            show: false,
+          },
+          offset: 10,
+  
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (value) {
+              return value.length > 3 ? value.slice(0, 2) + "..." : value;
+            },
+          },
+        },
+        {
+          type: "category",
+          data: data.xxname,
+          axisLine: {
+            show: false,
+          },
+          offset: 10,
+  
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+            color: "#fff",
+            fontSize: 16,
+          },
+        },
+      ],
+      yAxis: {
+        min: 0,
+        max: data.Max,
+        // interval: 100,
+        type: "value",
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, .16)",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(255, 255, 255, .16)",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          fontSize: 16,
+          color: "#fff",
+        },
+      },
+      series: [
+        //阴影部分
+        {
+          type: "custom",
+          renderItem: function (params, api) {
+            // console.log(api);
+            const location = api.coord([api.value(0), api.value(1)]);
+            return {
+              type: "group",
+              children: [
+                {
+                  type: "CubeBottom_1",
+                  shape: {
+                    api,
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: "rgba(103, 180, 233, .16)",
+                  },
+                },
+                {
+                  type: "CubeLeft_1",
+                  shape: {
+                    api,
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: "rgba(103, 180, 233, .04)",
+                  },
+                },
+                {
+                  type: "CubeFront_1",
+                  shape: {
+                    api,
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: "rgba(103, 180, 233, .16)",
+                  },
+                },
+                {
+                  type: "CubeRight_1",
+                  shape: {
+                    api,
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: "rgba(103, 180, 233, .08)",
+                  },
+                },
+                {
+                  type: "CubeTop_1",
+                  shape: {
+                    api,
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: "rgba(103, 180, 233, .26)",
+                  },
+                },
+              ],
+            };
+          },
+          data: maxList.value,
+        },
+        {
+          type: "custom",
+          renderItem: (params, api) => {
+            const location = api.coord([api.value(0), api.value(1)]);
+  
+            return {
+              type: "group",
+              children: [
+                {
+                  type: "CubeBottom_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["bottom"],
+                  },
+                },
+                {
+                  type: "CubeLeft_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["left"],
+                  },
+                },
+                {
+                  type: "CubeFront_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["front"],
+                  },
+                },
+                {
+                  type: "CubeRight_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["right"],
+                  },
+                },
+                {
+                  type: "CubeTop_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["top"],
+                  },
+                },
+              ],
+            };
+          },
+  
+          data: data.valueList,
+        },
+        //顶部字体
+        {
+          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: 20,
+        },
+      ],
+    };
+  };
+  const setChart = () => {
+    var myChart = echarts.init(chart.value);
+    myChart.setOption(data.option);
+      myChart.on("click", function (params) {
+      emit('shuju',params.name);
+    });
+  };
+  const getMaxCeilingValue = (arr) => {
+    let max = Math.max(...arr);// 找到数组中的最大值
+    return Math.ceil(max / 100) * 100;// 将最大值向上取整到最近的100的倍数
+  };
+  const setChart1 = () => {
+    data.valueList = [];
+    data.xxname = [];
+    if (data.list.length !== 0) {
+      data.list.forEach((item) => {
+        data.xxname.push(item.name); //信息名
+        data.valueList.push(item.num); //信息数
+      });
+    }
+  };
+  
+  onBeforeMount(() => {
+    setTimeout(() => {
+      data.list = props.list;
+      setChart1();
+      data.Max = getMaxCeilingValue(data.valueList);
+      maxList.value = data.valueList.map((item) => parseInt(data.Max)   * 0.9);// 生成新的数组，将每个值都替换为 data.Max 的90%
+      getOption();
+      setChart();
+    }, 800);
+  });
+  </script>
+  
+  <style lang="scss" scoped></style>
+  
\ No newline at end of file
diff --git a/src/view/echarts_jz/eP2.vue b/src/view/echarts_jz/eP2.vue
index a8b21a4..e10fda0 100644
--- a/src/view/echarts_jz/eP2.vue
+++ b/src/view/echarts_jz/eP2.vue
@@ -1,9 +1,9 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 330px"></div>
+  <div ref="chart" style="width: 100%; height: 430px"></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 const props = defineProps({
@@ -11,16 +11,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  year: {
-    type: Array,
-    default: () => [],
-  },
 });
 const data = reactive({
   list: [],
-  year: [],
   option: {},
-  bg: [],
 });
 //职称结构取数
 
@@ -64,11 +58,10 @@ const getOption = () => {
   data.option = {
     legend: {
       show: true,
-      width: "80%",
       top: "5%",
       textStyle: {
         inside: true,
-        color: "#9FC3E7",
+        color: "#ffffff",
         padding: [14, 0, 10, 0],
         align: "left",
         verticalAlign: "center",
@@ -77,7 +70,7 @@ const getOption = () => {
       },
       // icon: "rect",
       itemGap: 10,
-      itemWidth: 12,
+      itemWidth: 20,
       itemHeight: 12,
       // bottom: '15%'
     },
@@ -96,75 +89,17 @@ const getOption = () => {
         },
         type: "pie",
         radius: ["20%", "50%"],
-        center: ["50%", "50%"],
-
+        center: ["55%", "50%"],
         label: {
-          // 显示标签
-          show: true,
-          // 标签位置
-          position: "outside",
-          // 标签对齐方式
-          // alignTo: "labelLine",
-          // 背景颜色
-          backgroundColor: "transparent",
-          // 高度
-          height: 0,
-          // 宽度
-          width: 0,
-          // 行高
-          lineHeight: 0,
-          // 标签距离标签线的距离
-          distanceToLabelLine: 0,
-          // 边框圆角
-          borderRadius: 3,
-          // 边框宽度
-          borderWidth: 1,
-          // 边框颜色
-          borderColor: "auto",
-          // 内边距
-          padding: [3, -3, 3, -3],
-          // 标签格式化
-          formatter: function (params) {
-            return `{b|${params.value}%}{a|${params.name}}`;
-          },
-          // 富文本样式
-          rich: {
-            // a样式
-            a: {
-              // 内边距
-              padding: [-14, 10, 40, -70],
-              // 字体大小
-              fontSize: "12px",
-              // 字体
-              fontFamily: "MicrosoftYaHei",
-              // 字体颜色
-              color: "#fff",
-            },
-            // b样式
-            b: {
-              // 内边距
-              padding: [0, 10, 55, -70],
-              // 字体大小
-              fontSize: "15px",
-              // 字体
-              fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
-              // 字体粗细
-              fontWeight: "bold",
-              // 字体颜色
-              color: "#fff",
-            },
+          textStyle: {
+            color: "white", // 改变标示文字的颜色
+            fontSize: 18, //文字大小
           },
+          formatter: "{b}:{c}" + "个\n\n",
+          borderWidth: 20,
+          borderRadius: 4,
+          padding: [0, -100],
         },
-        // label: {
-        //   textStyle: {
-        //     color: "white", // 改变标示文字的颜色
-        //     fontSize: 18, //文字大小
-        //   },
-        //   formatter: "{b}:{c}" + "个\n\n",
-        //   borderWidth: 20,
-        //   borderRadius: 4,
-        //   padding: [0, -80],
-        // },
         labelLine: {
           normal: {
             length: 40, // 改变标示线的长度
@@ -174,10 +109,7 @@ const getOption = () => {
             // },
           },
         },
-        data: [
-          { name: "男", value: 300 },
-          { name: "女", value: 200 },
-        ],
+        data: data.list,
       },
       {
         name: "外边框",
@@ -187,7 +119,7 @@ const getOption = () => {
         },
         clockWise: false, //顺时加载
         hoverAnimation: false, //鼠标移入变大
-        center: ["50%", "50%"], //这里跟上面那组一样即可
+        center: ["55%", "50%"], //这里跟上面那组一样即可
         radius: ["52%", "52%"], //这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
         label: {
           normal: {
@@ -219,14 +151,14 @@ const setChart = () => {
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
 };
-
+watch(()=>props.list,()=>{
+  data.list=props.list
+  getOption();
+  setChart();
+})
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list = props.list;
-    data.year = props.year;
-    data.year.forEach(() => {
-      data.bg.push(0);
-    });
+    data.list=props.list
     getOption();
     setChart();
   }, 600);
diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue
index 92909de..50a5631 100644
--- a/src/view/sy_map.vue
+++ b/src/view/sy_map.vue
@@ -263,6 +263,9 @@
             v-if="currentData.camera"
           />
         </template>
+        <template #zxs="{ currentCol, currentData }">
+          <div style="width: 10px; height: 10px" v-if="currentData.zxs">*</div>
+        </template>
       </Dialog>
       <DialogCamera
         :cameraShow="sxtShow.show"
@@ -1023,7 +1026,12 @@ const sxtShow = reactive({
 const tableType = reactive({
   url: "",
   title: "人员列表",
-  columns: [
+  columns: [],
+  data: [],
+  type: true, //判断分页执行为那个方法，true为人口标签，false为资源要素
+});
+const table_column_list = reactive({
+  sxt: [
     {
       label: "序号",
       property: "index",
@@ -1043,10 +1051,6 @@ const tableType = reactive({
       label: "年龄",
       property: "age",
     },
-    // {
-    //   label: "政治面貌",
-    //   property: "zzmm",
-    // },
     {
       label: "居住状态",
       property: "jzzt",
@@ -1073,8 +1077,54 @@ const tableType = reactive({
       type: "slot",
     },
   ],
-  data: [],
+  zxs: [
+    {
+      label: "序号",
+      property: "index",
+      width: "50",
+      type: "index",
+      align: "center",
+    },
+    {
+      label: "姓名",
+      property: "nm",
+    },
+    {
+      label: "手机号",
+      property: "contactTel",
+    },
+    {
+      label: "年龄",
+      property: "age",
+    },
+    {
+      label: "居住状态",
+      property: "jzzt",
+      type: "slot",
+    },
+    {
+      label: "民族",
+      property: "ethnic",
+    },
+    {
+      label: "性别",
+      property: "gender",
+    },
+
+    {
+      label: "户口登记地",
+      property: "domicAddr",
+      width: "200px",
+    },
+    {
+      label: "",
+      property: "zxs",
+      width: "30px",
+      type: "slot",
+    },
+  ],
 });
+
 // 表格分页
 const pagination = reactive({
   total: 100,
@@ -1148,8 +1198,6 @@ const bjtitle = computed(() => {
   }
 });
 const openqx = () => {
-  console.log(1111);
-
   if (jsqx.value) {
     ElMessageBox.confirm("确定要取消权限吗?")
       .then(() => {
@@ -2741,7 +2789,7 @@ const changeys = (name) => {
       zyys_center.value.length = 0;
     }
   } else {
-    loadingss.value=true;
+    loadingss.value = true;
     csh();
     clearPerson();
     yaosuList.value.push(name);
@@ -2903,7 +2951,7 @@ const createZyys = (polygon, indexx, name, tooltip) => {
           } else {
             zyysCenter.length = 0;
             zyysDk.length = 0;
-            await get_dk_zyys(polygon.fgfwrs,polygon.startAge,polygon.endAge);
+            await get_dk_zyys(polygon.fgfwrs, polygon.startAge, polygon.endAge);
             xr_dk_center_zyys();
           }
 
@@ -2955,7 +3003,7 @@ const loadCs_zyys = async (name) => {
     }
   }
 };
-const get_dk_zyys = async (sj,start,end) => {
+const get_dk_zyys = async (sj, start, end) => {
   zyys_dk.value.length = 0;
   zyys_center.value.length = 0;
   zyys_data.value.point.length = 0;
@@ -2977,7 +3025,14 @@ const get_dk_zyys = async (sj,start,end) => {
     });
     zyysCenter.forEach((center) => {
       if (item.committee == center.name) {
-        let a = { ...center, num: item.num,town: item.town,committee: item.committee,startAge:start,endAge:end };
+        let a = {
+          ...center,
+          num: item.num,
+          town: item.town,
+          committee: item.committee,
+          startAge: start,
+          endAge: end,
+        };
         zyys_data.value.center.push(a);
       }
     });
@@ -3006,7 +3061,13 @@ const xr_dk_center_zyys = async () => {
   });
 };
 //资源要素(渲染地块)
-
+//分页存储数据
+const zyys_table = reactive({
+  town: "",
+  committee: "",
+  startAge: "",
+  endAge: "",
+});
 const Xr_zyysNum = (polygon, indexx) => {
   function createLabelDOM() {
     var content = document.createElement("div");
@@ -3072,19 +3133,20 @@ const Xr_zyysNum = (polygon, indexx) => {
   zyys_center.value[indexx].addEventListener("click", () => {
     console.log(polygon);
     // cfCsZs.value = polygon.name;
-    open_detail_zyys(polygon.town, polygon.committee,polygon.startAge,polygon.endAge);
+    tableType.type = false;
+    tableType.columns = table_column_list.zxs;
+    zyys_table.town = polygon.town;
+    zyys_table.committee = polygon.committee;
+    zyys_table.startAge = polygon.startAge;
+    zyys_table.endAge = polygon.endAge;
+    open_detail_zyys();
   });
 };
-const open_detail_zyys = (town,committee,start,end) => {
-  let age = "";
+const open_detail_zyys = () => {
   dialogShow.value = true;
   http
     .get(
-      `/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${
-        pagination.pageSize
-      }&committee=${committee}&town=${
-        town
-      }&startAge=${start}&endAge=${end}`
+      `/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${pagination.pageSize}&committee=${zyys_table.committee}&town=${zyys_table.town}&startAge=${zyys_table.startAge}&endAge=${zyys_table.endAge}`
     )
     .then((res) => {
       if (res.code == 200) {
@@ -3167,6 +3229,8 @@ const to_jd = async (item_name) => {
 };
 //详情
 const open_detail = () => {
+  tableType.type = true;
+  tableType.columns = table_column_list.sxt;
   let age = "";
   let tagId;
   if (choose.value.person == "9999") {
@@ -3222,37 +3286,29 @@ const onsxt = () => {
 //表格分页
 const handlePagination = (current) => {
   pagination.currentPage = current;
-  let age = "";
-  let tagId;
-  if (choose.value.person == "9999") {
-    age = "";
-    person_detail(age);
-  } else if (choose.value.person == "6666") {
-    age = "";
-    person_detail2();
-  } else if (
-    // choose.value.person == "残疾人" ||
-    // choose.value.person == "低边" ||
-    // choose.value.person == "低保" ||
-    // choose.value.person == "高血压" ||
-    // choose.value.person == "糖尿病" ||
-    // choose.value.person == "退役军人" ||
-    // choose.value.person == "困境儿童" ||
-    // choose.value.person == "孤儿" ||
-    // choose.value.person == "特困" ||
-    // choose.value.person == "精神病人"
-    tsbq_pp.value.includes(choose.value.person)
-  ) {
-    age = "";
-    tsbq_id_total.value.forEach((item, index) => {
-      if (choose.value.person == item.name) {
-        tagId = item.tagId;
-      }
-    });
-    person_detail(age, tagId);
+  if (tableType.type) {
+    let age = "";
+    let tagId;
+    if (choose.value.person == "9999") {
+      age = "";
+      person_detail(age);
+    } else if (choose.value.person == "6666") {
+      age = "";
+      person_detail2();
+    } else if (tsbq_pp.value.includes(choose.value.person)) {
+      age = "";
+      tsbq_id_total.value.forEach((item, index) => {
+        if (choose.value.person == item.name) {
+          tagId = item.tagId;
+        }
+      });
+      person_detail(age, tagId);
+    } else {
+      age = choose.value.person;
+      person_detail(age);
+    }
   } else {
-    age = choose.value.person;
-    person_detail(age);
+    open_detail_zyys();
   }
 };
 
diff --git a/src/view/table_gk/gk_jz.vue b/src/view/table_gk/gk_jz.vue
index 1dcb123..cf68e73 100644
--- a/src/view/table_gk/gk_jz.vue
+++ b/src/view/table_gk/gk_jz.vue
@@ -12,6 +12,7 @@
           :list="data.jsbgl"
           v-if="showEchart"
           style="width: 95%; margin-top: 10px"
+          @shuju="jsSj"
         ></eP3>
       </div>
       <div class="flex1">
@@ -33,10 +34,7 @@
               {{ item }}
             </div>
           </div>
-          <eP2
-            :list="data.medicalInsurance.ffrc"
-            :year="data.medicalInsurance.year"
-          ></eP2>
+          <eP2 :list="data.wfjw.list"></eP2>
         </div>
       </div>
     </div>
@@ -50,13 +48,13 @@
         </div>
         <div class="shang">
           <div class="shang_item">
-            <div class="title">物业小区</div>
+            <div class="title" @click="openTable('物业小区')">物业小区</div>
             <div class="i">
               <zwfw1 :list="data.fgl.list1" v-if="showEchart" />
             </div>
           </div>
           <div class="shang_item">
-            <div class="title">专业物业</div>
+            <div class="title" @click="openTable('专业物业')">专业物业</div>
             <div class="i">
               <zwfw2 :list="data.fgl.list2" v-if="showEchart" />
             </div>
@@ -64,7 +62,7 @@
         </div>
       </div>
 
-      <div class="flex1" style="margin-top: 20px">
+      <div class="flex1" style="margin-top: -70px; z-index: 5">
         <div class="yd_title center_2">
           <div class="animate-border">
             <i></i>
@@ -74,14 +72,26 @@
         <div class="wlsq">
           <el-table
             :data="data.tableData1"
-            style="width: 100%; height: 500px"
+            style="width: 100%; height: 550px"
             class="table_border"
             :row-style="rowState"
             :header-cell-style="tableHeaderColor"
           >
-            <el-table-column prop="name" label="社区名称" show-overflow-tooltip/>
-            <el-table-column prop="address" label="社区位置" show-overflow-tooltip/>
-            <el-table-column prop="text" label="社区材料" show-overflow-tooltip/>
+            <el-table-column
+              prop="name"
+              label="社区名称"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="address"
+              label="社区位置"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="text"
+              label="社区材料"
+              show-overflow-tooltip
+            />
           </el-table>
         </div>
       </div>
@@ -121,25 +131,66 @@
           </div>
           <el-table
             :data="data.tableData2"
-            style="width: 100%; height: 500px"
+            style="width: 100%; height: 480px"
             class="table_border"
             :row-style="rowState"
             :header-cell-style="tableHeaderColor"
           >
-            <el-table-column prop="starttime" label="开始时间" width="120" show-overflow-tooltip/>
+            <el-table-column
+              prop="starttime"
+              label="开始时间"
+              width="120"
+              show-overflow-tooltip
+            />
 
-            <el-table-column prop="endtime" label="结束时间" width="120" show-overflow-tooltip/>
-            <el-table-column prop="address" label="地点" width="132" show-overflow-tooltip/>
-            <el-table-column prop="title" label="名称" width="132" show-overflow-tooltip/>
-            <el-table-column prop="finish" label="详情"  width="120">
+            <el-table-column
+              prop="endtime"
+              label="结束时间"
+              width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="address"
+              label="地点"
+              width="132"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="title"
+              label="名称"
+              width="132"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="finish" label="详情" width="120">
               <template #default="scope">
-                <div>查看详情</div>
+                <div @click="goDetail(scope.row)">查看详情</div>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
     </div>
+    <Dialog
+      :dialogShow="dialogShow"
+      :columns="tableType.columns"
+      :title="tableType.title"
+      :tableData="tableType.data"
+      :pagination="pagination"
+      :showXq="false"
+      @close="close"
+      @handle="handlePagination"
+    >
+    </Dialog>
+    <DialogEcTy
+      :dialogShowEc="dialogShowEcTy"
+      :title="tableType.title"
+      :showXq="false"
+      @close="close"
+    >
+      <template #echart>
+        <dialog_bzxzf :list="data.bzxzf"></dialog_bzxzf>
+      </template>
+    </DialogEcTy>
   </div>
 </template>
   
@@ -152,8 +203,13 @@ import eP4 from "../echarts_jz/eP4.vue";
 import http from "@/utils/request.js";
 import zwfw1 from "../echarts_jz/zwfw1.vue";
 import zwfw2 from "../echarts_jz/zwfw2.vue";
+import Dialog from "../dialog/dialog.vue";
+import DialogEcTy from "../dialog/dialogEcTy.vue";
+import dialog_bzxzf from "../echarts_jz/dialog_bzxzf.vue";
 const data = reactive({
-  medicalInsurance: {},
+  wfjw: {
+    list: [],
+  },
   fgl: {
     list1: {
       finish: 60,
@@ -231,7 +287,34 @@ const data = reactive({
     chooselist: ["城镇", "农村"],
     choose: "城镇",
   },
+  //保障型住房
+
+  bzxzf: [
+    { name: "龙洲街道", num: 1 },
+    { name: "东华街道", num: 2 },
+    { name: "湖镇镇", num: 3 },
+    { name: "小南海镇", num: 4 },
+    { name: "溪口镇", num: 5 },
+    { name: "横山镇", num: 6 },
+    { name: "塔石镇", num: 7 },
+    { name: "詹家镇", num: 8 },
+    { name: "罗家乡", num: 9 },
+    { name: "庙下乡", num: 10 },
+    { name: "沐尘畲族乡", num: 11 },
+    { name: "模环乡", num: 12 },
+    { name: "石佛乡", num: 13 },
+    { name: "社阳乡", num: 14 },
+    { name: "大街乡", num: 15 },
+  ],
 });
+const wfjwsj_cz = [
+  { name: "已解危数", value: 150 },
+  { name: "已腾空解危数", value: 100 },
+];
+const wfjwsj_nc = [
+  { name: "已解危数", value: 250 },
+  { name: "已腾空解危数", value: 100 },
+];
 // 表格样式
 const tableHeaderColor = (arg) => {
   return {
@@ -262,12 +345,96 @@ const rowState = (row) => {
     };
   }
 };
+//表格弹框-----
+const dialogShow = ref(false);
+const dialogShowEcTy = ref(false);
+const tableType = reactive({
+  url: "",
+  title: "",
+  columns: [],
+  data: [],
+});
+const table_list = {
+  物业小区: {
+    url: "",
+    title: "物业小区详情清单",
+    column: [
+      {
+        label: "小区",
+        property: "xq",
+      },
+      {
+        label: "物业",
+        property: "wy",
+      },
+      {
+        label: "详情",
+        property: "xiangq",
+      },
+    ],
+  },
+  专业物业: {
+    url: "",
+    title: "专业物业详情清单",
+    column: [
+      {
+        label: "小区",
+        property: "xq",
+      },
+      {
+        label: "物业",
+        property: "wy",
+      },
+      {
+        label: "详情",
+        property: "xiangq",
+      },
+    ],
+  },
+};
+const openTable = (type) => {
+  tableType.url = table_list[type].url;
+  tableType.title = table_list[type].title;
+  tableType.columns = table_list[type].column;
+  dialogShow.value = true;
+};
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+const close = () => {
+  dialogShow.value = false;
+  dialogShowEcTy.value = false;
+  pagination.currentPage = 1;
+  pagination.total = 100;
+};
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+};
+//图表弹框
+const jsSj = (name, index) => {
+  if (index == 2) {
+    tableType.title = "保障型住房";
+    dialogShowEcTy.value = true;
+  }
+};
+//
 const showEchart = ref(false);
-const chooseWfjw=(val)=>{
-  data.wfjw.choose = val
-}
+const chooseWfjw = (val) => {
+  data.wfjw.choose = val;
+  if (val == "城镇") {
+    data.wfjw.list = wfjwsj_cz;
+  } else if (val == "农村") {
+    data.wfjw.list = wfjwsj_nc;
+  }
+};
+//查看详情
+const goDetail = () => {};
 const getData = async () => {
   showEchart.value = true;
+  data.wfjw.list = wfjwsj_cz;
   // await http.get("/api/ggfwyth/health").then((res) => {
   //   if (res.code == 200) {
   //     data.medicalInsurance = res.data.medicalInsurance;
@@ -520,7 +687,7 @@ onMounted(() => {});
 //危房解危
 .wfjw {
   width: 95%;
-  margin-top: 10px;
+  margin-top: 20px;
   .wfjw_choose {
     display: flex;
     align-items: center;
@@ -551,7 +718,7 @@ onMounted(() => {});
 }
 //覆盖率
 .shang {
-  margin-top: 20px;
+  margin-top: 40px;
   display: flex;
   justify-content: space-around;
   &_item {
@@ -570,10 +737,13 @@ onMounted(() => {});
       color: #ffffff;
       line-height: 20px;
       letter-spacing: 2px;
+      z-index: 5;
+      cursor: pointer;
     }
     .i {
-      width: 100%;
-      height: 200px;
+      margin-top: -20px;
+      width: 90%;
+      height: 300px;
     }
   }
 }
@@ -595,7 +765,9 @@ onMounted(() => {});
     flex-direction: column;
     align-items: center;
     .zzgc_item_title {
-      margin-top: 20px;
+      position: relative;
+      margin: 10px 0;
+      padding: 10px;
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
       font-size: 16px;
@@ -609,6 +781,16 @@ onMounted(() => {});
         rgba(255, 255, 255, 0) 100%
       );
     }
+    .zzgc_item_title::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 26px;
+      height: 1px;
+      border: 2px solid #00e6ff;
+    }
   }
 }
 //棚户区改造
@@ -659,4 +841,39 @@ onMounted(() => {});
   border: 1px solid #7aceff;
 }
 </style>
-  
\ No newline at end of file
+<style lang="scss" scoped>
+// 分页
+:deep(.el-pagination > .is-last) {
+  color: #fff !important ;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+  margin: 0;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background: rgba(0, 144, 255, 0.49);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+</style>
\ No newline at end of file