1

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>
@@ -253,6 +253,16 @@
         <!-- <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>
 
@@ -269,7 +279,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 +377,66 @@ var roseData3 = ref([
     value: 78,
   },
 ]);
-// var schoolData = ref([
-//   { name: "副高级", value: 44 },
-//   { name: "正高级", value: 22 },
-//   { name: "未定级", value: 11 },
-//   { name: "员级", value: 12 },
-//   { name: "中级", value: 54 },
-//   { name: "助理级", value: 74 },
-// ]);
-// var schoolData1 = ref([
-//   { name: "副高级", value: 11 },
-//   { name: "正高级", value: 22 },
-//   { name: "未定级", value: 11 },
-//   { name: "员级", value: 12 },
-//   { name: "中级", value: 22 },
-//   { name: "助理级", value: 74 },
-// ]);
-// var schoolData2 = ref([
-//   { name: "副高级", value: 22 },
-//   { name: "正高级", value: 22 },
-//   { name: "未定级", value: 11 },
-//   { name: "员级", value: 33 },
-//   { name: "中级", value: 54 },
-//   { name: "助理级", value: 74 },
-// ]);
+//详情弹框
+const dialogShow = ref(false);
+const tableType = reactive({
+  url: "",
+  title: "",
+  columns: [
+    {
+      label: "学校",
+      property: "school",
+    },
+    {
+      label: "教师数",
+      property: "teacher",
+    },
+    {
+      label: "学生数",
+      property: "student",
+    },
+    {
+      label: "班级数",
+      property: "banji",
+    },
+  ],
+  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;

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,8 +294,12 @@ const showR = ref(false);
 // 详情弹框
 const dialogShow = ref(false);
 const tableType = reactive({
+  url: "",
   title: "",
-  columns: [
+  columns: [],
+  data: [],
+});
+const xz_column = ref([
   {
     label: "照料中心",
     property: "sdailycarecentername",
@@ -337,9 +341,21 @@ const tableType = reactive({
     label: "订单结束时间",
     property: "dtfinishtime",
   },
-  ],
-  data: [],
-});
+]);
+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;
+  if (tableType.url == "/api/ggfwyth/zcxxList") {
     getTownDetail();
+  } else {
+    getTable(tableType.url, pagination.currentPage);
+  }
 };
 const getTownDetail = () => {
   let params = {