Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/utils/request.js

@@ -27,22 +27,22 @@ axios.interceptors.response.use(
     },
     (error) => {
         if (error.response) {
-            if (error.response.status == 401) {
+            // if (error.response.status == 401) {
-                ElMessage.error("请重新登录!");
+            //     ElMessage.error("请重新登录!");
-                // window.location.href = '/#/login?returnURL=' + window.location.href
+            //     // window.location.href = '/#/login?returnURL=' + window.location.href
-                window.location.href =
+            //     window.location.href =
-                    'http://220.191.238.50:996/api/login?returnURL=' +
+            //         'http://220.191.238.50:996/api/login?returnURL=' +
-                    window.location.href
+            //         window.location.href
-            } else if (error.response.status == 404) {
+            // } else if (error.response.status == 404) {
-                ElMessage.error("Status:404，正在请求不存在的服务器记录！");
+            //     ElMessage.error("Status:404，正在请求不存在的服务器记录！");
-            } else if (error.response.status == 500) {
+            // } else if (error.response.status == 500) {
-                ElMessage.error({
+            //     ElMessage.error({
-                    title: '请求错误',
+            //         title: '请求错误',
-                    message: "Status:500，服务器发生错误！"
+            //         message: "Status:500，服务器发生错误！"
-                });
+            //     });
-            } else {
+            // } else {
-                ElMessage.error(`Status:${error.response.status}，未知错误！`);
+            //     ElMessage.error(`Status:${error.response.status}，未知错误！`);
-            }
+            // }
         } else {
             ElMessage.error("请求服务器无响应！");
         }

src/view/echarts_education/edXS.vue

@@ -0,0 +1,201 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 210px"></div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  month: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const data = reactive({
+  list: [],
+  month: [],
+  option: {},
+});
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a1}:{c1}",
+    },
+    grid: {
+      top: "5%",
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        data: data.month,
+      },
+      {
+        axisTick: false,
+        type: "category",
+        data: data.month,
+        axisLabel: {
+          show: false,
+        },
+      },
+    ],
+
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+      },
+      {
+        type: "value",
+        min: 0,
+        max: 100,
+        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.list,
+        symbol: "diamond",
+        symbolOffset: [0, "-50%"],
+        symbolSize: [10, 10],
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(23, 136, 255, 1)",
+        },
+      },
+      {
+        z: 1,
+        name: "线索",
+        type: "bar",
+        barGap: "0%",
+        data: data.list,
+        barWidth: "25%",
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(23, 136, 255, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(23, 136, 255, 0.20)",
+            },
+          ]),
+        },
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(23, 136, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 136, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 136, 255, .3)" },
+              { offset: 1, color: "rgba(23, 136, 255, .5)" },
+            ],
+          },
+        },
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+          fontSize: 16,
+        },
+        data: data.month.map(() => 100),
+        barWidth: 30,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.month = props.month;
+    // console.log(data.list, props.month, "教育");
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>

src/view/echarts_education/edXS1.vue

@@ -0,0 +1,164 @@
+<template>
+  <div ref="chart" style="width: 270px; height: 210px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  month: {
+    type: Array,
+    default: () => [],
+  },
+});
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} ",
+    },
+    grid: {
+      top: "5%",
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      // splitArea: {
+      //   show: true,
+      //   interval: '10',
+      //   areaStyle: {
+      //     color: ["rgba(255, 255, 255, 0.10)"],
+      //     width:10,
+      //   },
+      // },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "线索",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+              label: {
+          show: true,
+          color: "#ffffff",
+         position:'top',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#0069FF ",
+          borderWidth: 1,
+          color: "#0069FF ",
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  // color: 'RGBA(184, 204, 241, 1)'
+                  color: "rgba(0, 105, 255, 0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0, 105, 255, 0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+
+        data: data.list,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.month;
+    // console.log(data.list,props.month,'教育');
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/echarts_education/edXS2.vue

@@ -0,0 +1,164 @@
+<template>
+  <div ref="chart" style="width: 270px; height: 210px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  month: {
+    type: Array,
+    default: () => [],
+  },
+});
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} ",
+    },
+    grid: {
+      top: "5%",
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      // splitArea: {
+      //   show: true,
+      //   interval: '10',
+      //   areaStyle: {
+      //     color: ["rgba(255, 255, 255, 0.10)"],
+      //     width:10,
+      //   },
+      // },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "线索",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+              label: {
+          show: true,
+          color: "#ffffff",
+         position:'top',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#FFEA5A",
+          borderWidth: 1,
+          color: "#FFEA5A",
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  // color: 'RGBA(184, 204, 241, 1)'
+                  color: "rgba(255, 234, 90, 0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(255, 234, 90, 0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+
+        data: data.list,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.month;
+    // console.log(data.list,props.month,'教育');
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/echarts_education/edXS3.vue

@@ -0,0 +1,164 @@
+<template>
+  <div ref="chart" style="width: 270px; height: 210px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  month: {
+    type: Array,
+    default: () => [],
+  },
+});
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} ",
+    },
+    grid: {
+      top: "5%",
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      // splitArea: {
+      //   show: true,
+      //   interval: '10',
+      //   areaStyle: {
+      //     color: ["rgba(255, 255, 255, 0.10)"],
+      //     width:10,
+      //   },
+      // },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "线索",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+              label: {
+          show: true,
+          color: "#ffffff",
+         position:'top',
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  // color: 'RGBA(184, 204, 241, 1)'
+                  color: "rgba(0, 252, 255, 0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0, 252, 255, 0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+
+        data: data.list,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.month;
+    // console.log(data.list,props.month,'教育');
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/education.vue

@@ -92,32 +92,32 @@
           <div class="schoolb">
             <img src="../assets/eduImg/xxgkTop.png" class="gkTop" alt="" />
             <div class="grade">
-              <div class="schoolbs">
+              <div class="schoolbs" @click="showDialog('学校','')">
                 <span class="spot">初中</span>
                 <span>{{ data.xxgk.czxxsl }}</span>
               </div>
-              <div class="schoolbs">
+              <div class="schoolbs" @click="showDialog('学校','')">
                 <span class="spot">高中</span>
                 <span>{{ data.xxgk.gzxxsl }}</span>
               </div>
             </div>
             <div class="grade">
-              <div class="schoolbs">
+              <div class="schoolbs" @click="showDialog('学校','')">
                 <span class="spot">小学</span>
                 <span>{{ data.xxgk.xxxxsl }}</span>
               </div>
-              <div class="schoolbs">
+              <div class="schoolbs" @click="showDialog('学校','')">
                 <span class="spot">中职</span>
                 <span>{{ data.xxgk.zzxxsl }}</span>
               </div>
             </div>
             <div class="grade grade1">
-              <div class="schoolbs">
+              <div class="schoolbs" @click="showDialog('学校','')">
                 <span class="spot">幼儿园</span>
                 <span>{{ data.xxgk.yeyxxsl }}</span>
               </div>
               <div class="schoolbs">
-                <span class="spot">特殊教育</span>
+                <span class="spot" @click="showDialog('学校','')">特殊教育</span>
                 <span>{{ data.xxgk.tsjyxxsl }}</span>
               </div>
             </div>
@@ -187,22 +187,22 @@
         <div class="czr-sl">
           <div class="historyimg historyimg1">
             <span>覆盖医疗机构数量</span>
-            <span>{{data.whistleblower.yljgsl}}</span>
+            <span>{{ data.whistleblower.yljgsl }}</span>
           </div>
           <div class="historyimg historyimg2">
             <span>启用角色数量</span>
-            <span>{{data.whistleblower.qyjssl}}</span>
+            <span>{{ data.whistleblower.qyjssl }}</span>
           </div>
           <!-- <img src="@/assets/eduImg/jyImg14.png" alt="" />
           <img src="@/assets/eduImg/jyImg15.png" alt="" /> -->
         </div>
-        <edCSR></edCSR>
+        <!-- <edCSR></edCSR> -->
       </div>
       <div class="flex11">
         <div class="earlyWarning">
           <div class="earlyWarning1">
             <div>
-              <span class="green">{{data.whistleblower.green}}</span>
+              <span class="green">{{ data.whistleblower.green }}</span>
             </div>
             <img src="@/assets/eduImg/jyImg10.png" alt="" />
             <img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" />
@@ -212,7 +212,7 @@
           </div>
           <div class="earlyWarning1">
             <div>
-              <span class="yellow">{{data.whistleblower.yellow}}</span>
+              <span class="yellow">{{ data.whistleblower.yellow }}</span>
             </div>
             <img src="@/assets/eduImg/jyImg9.png" alt="" />
             <img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" />
@@ -222,7 +222,7 @@
           </div>
           <div class="earlyWarning1">
             <div>
-              <span class="red">{{data.whistleblower.red}}</span>
+              <span class="red">{{ data.whistleblower.red }}</span>
             </div>
             <img src="@/assets/eduImg/jyImg8.png" alt="" />
             <img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" />
@@ -235,32 +235,54 @@
       <div class="flex1">
         <div style="display: flex; justify-content: center">
           <div class="czr-bj">
-            <div class="czrBox">
+            <div>
-              <div class="situation situation1"></div>
+              <div class="czrBox">
-              <div class="column">
+                <div class="situation situation1"></div>
-                <div v-for="item in 3">
+                <edxs :list="data.xs.gxyrs" :month="data.xs.month"></edxs>
-                  作为侦探在做推理的时候，心里也有很多地方隐藏著不安，担心可能会疏忽某些地方，而导致还存在另一种可能性……所以说当自己的推理正中靶心的时候，这种成就感就无与伦比！
+              </div>
-                </div>
+              <div class="czrBox">
+                <div class="situation situation2"></div>
+                <edxs1 :list="data.xs.gxyrs" :month="data.xs.month"></edxs1>
               </div>
             </div>
-            <div class="czrBox">
+            <div>
-              <div class="situation situation2"></div>
+              <div class="czrBox">
+                <div class="situation situation3"></div>
+                <edxs2 :list="data.xs.gxyrs" :month="data.xs.month"></edxs2>
+              </div>
+              <div class="czrBox">
+                <div class="situation situation4"></div>
+                <edxs3 :list="data.xs.gxyrs" :month="data.xs.month"></edxs3>
+              </div>
             </div>
-            <div class="situation situation3"></div>
-            <div class="czrBox"></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 edCSR from "./echarts_education/edCSR.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 edie from "./echarts_education/pie.vue";
 import edie5 from "./echarts_education/pie5.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";
@@ -269,7 +291,7 @@ 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 selectData = reactive({
   value1: "111",
   value2: "tes1",
@@ -367,31 +389,66 @@ var roseData3 = ref([
     value: 78,
   },
 ]);
-// var schoolData = ref([
+//详情弹框
-//   { name: "副高级", value: 44 },
+const dialogShow = ref(false);
-//   { name: "正高级", value: 22 },
+const tableType = reactive({
-//   { name: "未定级", value: 11 },
+  url: "",
-//   { name: "员级", value: 12 },
+  title: "",
-//   { name: "中级", value: 54 },
+  columns: [
-//   { name: "助理级", value: 74 },
+    {
-// ]);
+      label: "学校",
-// var schoolData1 = ref([
+      property: "school",
-//   { name: "副高级", value: 11 },
+    },
-//   { name: "正高级", value: 22 },
+    {
-//   { name: "未定级", value: 11 },
+      label: "教师数",
-//   { name: "员级", value: 12 },
+      property: "teacher",
-//   { name: "中级", value: 22 },
+    },
-//   { name: "助理级", value: 74 },
+    {
-// ]);
+      label: "学生数",
-// var schoolData2 = ref([
+      property: "student",
-//   { name: "副高级", value: 22 },
+    },
-//   { name: "正高级", value: 22 },
+    {
-//   { name: "未定级", value: 11 },
+      label: "班级数",
-//   { name: "员级", value: 33 },
+      property: "banji",
-//   { name: "中级", value: 54 },
+    },
-//   { name: "助理级", value: 74 },
+  ],
-// ]);
+  data: [],
+});
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+  getTable(tableType.url, pagination.currentPage);
+};
+const showDialog = (title, url) => {
+  tableType.title = title;
+  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}`)
+  //   .then((res) => {
+  //     if (res.code == 200) {
+  //       tableType.data = res.data;
+  //       pagination.total = res.count;
+  //       dialogShow.value = true;
+  //     }
+  //   });
+};
+const close = () => {
+  dialogShow.value = false;
+};
 
+//----
 const selectChange1 = () => {
   if (selectData.value1 == "111") {
     selectData.list = roseData1.value;
@@ -466,6 +523,10 @@ const data = reactive({
     { name: "中级", value: "" },
     { name: "助理级", value: "" },
   ],
+  xs: {
+    gxyrs: ["255", "165", "165", "165", "165"],
+    month: ["5.31", "6.1", "6.2", "6.3", "6.4"],
+  }, //线索
 });
 const getData = async () => {
   await http.get("/api/ggfwyth/education").then((res) => {
@@ -555,8 +616,6 @@ onMounted(() => {
 }
 
 .flex1 {
-  flex: 1;
-  // padding: 0 28px;
   box-sizing: border-box;
 }
 
@@ -1147,17 +1206,23 @@ onMounted(() => {
 
 .czr-bj {
   width: 529px;
-  // 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);
   border-radius: 2px;
   padding: 20px 0 0 14px;
+  display: flex;
+  justify-content: space-around;
+
+  // 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;
+    // height: 104px;
-
+    min-height: 310px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     .column {
       height: calc(100% - 26px);
       overflow-y: auto;
@@ -1169,22 +1234,26 @@ onMounted(() => {
   }
 
   .situation {
-    width: 495px;
+    width: 196px;
-    height: 26px;
+    height: 45px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
+    margin-bottom: 16px;
   }
 
   .situation1 {
-    background-image: url(@/assets/eduImg/jyImg11.png);
+    background-image: url(@/assets/images/education/xs.png);
   }
 
   .situation2 {
-    background-image: url(@/assets/eduImg/jyImg12.png);
+    background-image: url(@/assets/images/education/xs2.png);
   }
 
   .situation3 {
-    background-image: url(@/assets/eduImg/jyImg13.png);
+    background-image: url(@/assets/images/education/xs1.png);
+  }
+  .situation4 {
+    background-image: url(@/assets/images/education/xs3.png);
   }
 }
 

src/view/yl.vue

@@ -183,7 +183,7 @@
           </div>
         </div>
         <div class="history">
-          <div class="history1">
+          <div class="history1" @click="showDialog('养老机构', '')">
             <div>
               <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
             </div>
@@ -198,7 +198,7 @@
             <img src="@/assets/YLimg/ylimg3.png" alt="" />
             <img class="historyimg" src="@/assets/YLimg/ylimg6.png" alt="" />
           </div> -->
-          <div class="history1">
+          <div class="history1" @click="showDialog('居家养老服务照料中心', '')">
             <div>
               <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
             </div>
@@ -294,52 +294,68 @@ const showR = ref(false);
 // 详情弹框
 const dialogShow = ref(false);
 const tableType = reactive({
+  url: "",
   title: "",
-  columns: [
+  columns: [],
-    {
-      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",
-    },
-  ],
   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: "name",
+  },
+  {
+    label: "机构地址",
+    property: "address",
+  },
+  {
+    label: "老人数量",
+    property: "oldMan",
+  },
+]);
 // 表格分页
 const pagination = reactive({
   total: 100,
@@ -351,15 +367,41 @@ const change = (name, index) => {
 };
 const chooseVillage = (village) => {
   tableType.title = village;
+  tableType.columns = xz_column.value;
+  tableType.url = "/api/ggfwyth/zcxxList";
   getTownDetail();
 };
+const showDialog = (title, url) => {
+  tableType.title = title;
+  tableType.url = url;
+  tableType.columns = yl_column.value;
+  getTable(url, pagination.currentPage);
+};
+//获取表格数据
+const getTable = (url, currentPage) => {
+  dialogShow.value = true;
+  tableType.data = [];
+  // 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;
   pagination.currentPage = 1;
 };
 const handlePagination = (current) => {
   pagination.currentPage = current;
-  getTownDetail();
+  if (tableType.url == "/api/ggfwyth/zcxxList") {
+    getTownDetail();
+  } else {
+    getTable(tableType.url, pagination.currentPage);
+  }
 };
 const getTownDetail = () => {
   let params = {