更新

shuzhixiangzheng/src/assets/base.css

@@ -64,21 +64,47 @@
     overflow-y: auto;
   } */
 
-  body .el-table th.gutter{
+  #child1_form body .el-table th.gutter{
     display: table-cell!important;
   }
-  table,tbody,thead {
+  #child1_form table,tbody,thead {
       width: 100% !important;
     }
-    colgroup {
+    #child1_form colgroup {
       position: absolute;
       width: 100% !important;
       display: flex;
     }
-    col {
+    #child1_form col {
       flex: 1;
       text-align: center;
     }
-    .el-table .el-table__cell.gutter{
+    #child1_form .el-table .el-table__cell.gutter{
       width: 0px !important;
     }
+/* 分页 */
+.el-pagination{
+  color: #fff !important;
+  font-weight: 400 !important;
+}
+.el-dialog, .el-pager li{
+  /* color: #fff !important; */
+  background-color: transparent !important;
+}
+.el-pager li.active{
+  font-size: 18px !important;
+  font-weight: 700 !important;
+  color: #0b61c5 !important;
+}
+.el-pagination .btn-next, .el-pagination .btn-prev{
+  color: #fff !important;
+  background-color: transparent !important;
+}
+.el-input__inner{
+  background-color:transparent !important;
+  border:1px solid #0b61c5 !important;
+  color: #fff !important;
+}
+.el-pagination__jump{
+  color: #fff !important;
+}

shuzhixiangzheng/src/components/DaZhongPage.vue

@@ -17,7 +17,6 @@
                     v-show="form_show"
                     id="table"
                     :data="jhgj_tableData"
-                    
                     style="width: 33%;">
                     <el-table-column
                       prop="name"

shuzhixiangzheng/src/components/ZheJiPage.vue

@@ -1,78 +1,70 @@
 <template>
-    <div id="3dage">
-      <Time></Time>
-      <ReturnButton></ReturnButton>
-      <img class="img" id="img1" src="../assets/png/footer.png"></img>
-      <img class="img" id="img2" src="../assets/png/title.png"></img>
-      <img class="img" id="img3" :src="left2Png_url"></img>
-      <img class="img" id="img5" :src="right2Png_url"></img>
+  <div id="3dage">
+    <Time></Time>
+    <ReturnButton></ReturnButton>
+    <img class="img" id="img1" src="../assets/png/footer.png" />
+    <img class="img" id="img2" src="../assets/png/title.png" />
+    <img class="img" id="img3" :src="left2Png_url" />
+    <img class="img" id="img5" :src="right2Png_url" />
 
-      <div id="child1_form" v-show="form_show">
-        <img class="img" id="x_img1" src="../assets/png/×.png"  v-on:click="close_showFun"></img>
-        <img class="img" id="form_img1" :src="house2Png_url">
-        </img>
-        <img class="img" id="background_img" src="../assets/png/background.png"  v-show="form_show"></img> 
-       
-        <div id="numberDiv" v-show="form_show">{{houseNum}}</div>
-        <el-table
+    <div id="child1_form" v-show="form_show">
+      <img
+        class="img"
+        id="x_img1"
+        src="../assets/png/×.png"
+        v-on:click="close_showFun"
+      />
+      <img class="img" id="form_img1" :src="house2Png_url" />
+      /
+      <img
+        class="img"
+        id="background_img"
+        src="../assets/png/background.png"
+        v-show="form_show"
+      />
+
+      <div id="numberDiv" v-show="form_show">{{ houseNum }}</div>
+      <el-table
         v-show="form_show"
         id="yjxs_table"
         :data="yjs_tableData"
         max-height="200"
-        :header-cell-style="{background:'#0b61c5',color:'#fff'}"
-        style="width: 38%;">
-        <el-table-column
-          prop="id"
-          label="序号"
-          width="100"
-          >
-        </el-table-column>
-        <el-table-column
-          prop="name"
-          label="姓名"
-          >
-        </el-table-column>
-        <el-table-column
-          prop="sexName"
-          label="性别"
-          >
-        </el-table-column>
-        <el-table-column
-          prop="age"
-          label="年龄"
-          >
-        </el-table-column>
-        <el-table-column
-        prop="type"
-        label="类别"
-        >
-      </el-table-column>
-        <el-table-column
-        prop="workspace"
-        label="工作单位"
-        >
-        </el-table-column>
-        <el-table-column
-        prop="telephone"
-        label="联系方式"
-        >
-    </el-table-column>
+        :header-cell-style="{ background: '#0b61c5', color: '#fff' }"
+        style="width: 38%"
+      >
+        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
+        <el-table-column prop="name" label="姓名"> </el-table-column>
+        <el-table-column prop="sexName" label="性别"> </el-table-column>
+        <el-table-column prop="age" label="年龄"> </el-table-column>
+        <el-table-column prop="type" label="类别"> </el-table-column>
+        <el-table-column prop="workspace" label="工作单位"> </el-table-column>
+        <el-table-column prop="telephone" label="联系方式"> </el-table-column>
       </el-table>
 
-        <div id="buidings">
-            <div id="building_1"></div>
-            <div id="building_20"></div>
-         </div>
-        </div>
+      <div id="buidings">
+        <div id="building_1"></div>
+        <div id="building_20"></div>
+      </div>
+    <!-- 分页 -->
+    <div class="paging">
+      <el-pagination
+        layout="prev, pager, next,jumper"
+        :total="total"
+        :current-page="myData.pageNum"
+        @current-change="currentChange"
+      >
+      </el-pagination>
+    </div>
     </div>
-  </template>
+  </div>
+</template>
   
   <script>
 import Time from "./Time.vue";
 import ReturnButton from "./ReturnButton.vue";
 import Map from "../assets/api/Map.js";
-import left2Png from "../assets/png/柘矶社区/left.png"
-  import right2Png from "../assets/png/柘矶社区/right.png"
+import left2Png from "../assets/png/柘矶社区/left.png";
+import right2Png from "../assets/png/柘矶社区/right.png";
 import house2Png from "../assets/png/house2.png";
 import { jinghuguoji_httpGet } from "../assets/api/loadData.js";
 export default {
@@ -83,6 +75,13 @@ export default {
   },
   data() {
     return {
+      myNum:1,
+      total: 0,
+      myData: {
+        villageName: "叶家舍安置小区",
+        pageNum: 1,
+        pageSize: 10,
+      },
       msg: "",
       form_show: false,
       left2Png_url: left2Png,
@@ -111,6 +110,23 @@ export default {
     this.lxw_changeHouse();
   },
   methods: {
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.myData.pageNum = val;
+      jinghuguoji_httpGet(
+        // console.log(999999999999,this.myNum),
+        { ...this.myData, buildingNumber: this.myNum },
+        (result) => {
+          this.houseNum = this.myNum + "橦";
+          this.yjs_tableData = result.data.data.list;
+          this.totle = result.data.data.total;
+
+          // this.yjs_tableData.num=
+        },
+        () => {}
+      );
+    },
     doEvent() {
       window.cesiumMap.left_clickFun(
         this.clickjinghuguojiShowFun,
@@ -133,15 +149,12 @@ export default {
 
       // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
       jinghuguoji_httpGet(
-        {
-          villageName: "叶家舍安置小区",
-          buildingNumber: 1,
-          pageNum:0,
-          pageSize:3
-        },
+        { ...this.myData, buildingNumber: 1 },
         (result) => {
           this.houseNum = "1" + "橦";
-          console.log(11111111111, result.data.data);
+          // console.log(11111111111, result);
+          this.total = result.data.data.total;
+          // console.log(9999,this.total)
           this.yjs_tableData = result.data.data.list;
         },
         () => {}
@@ -150,18 +163,17 @@ export default {
         document
           .getElementById("building_" + c)
           .addEventListener("click", () => {
+            this.myNum=c,
             // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
+              this.myData.pageNum = 1,
             jinghuguoji_httpGet(
-              {
-                villageName: "叶家舍安置小区",
-                buildingNumber: c,
-                pageNum:0,
-                pageSize:3
-              },
+              { ...this.myData, buildingNumber: c},
               (result) => {
+                // console.log(2222222222, result.data.data.total);
                 this.houseNum = c + "橦";
                 this.yjs_tableData = result.data.data.list;
-
+                this.total = result.data.data.total;
+                //  console.log(9999,this.total)
                 // this.yjs_tableData.num=
               },
               () => {}
@@ -170,29 +182,34 @@ export default {
       });
     },
     addDataToTable() {
-    //  var currentData = [];
-    // for (let i = 0; i < 5; i++) {
-    //   currentData.push(this.yjs_tableData[this.currentTableIndex * 5 + i]);
-    // }
-
-    // this.yjs_tableData;
-    // let tbody = document.getElementById("tbody");
-
-    // for (let i = 0; i < currentData.length; i++) {
-    //   let tr = document.createElement("tr");
-    //   tbody.appendChild(tr);
-    //   for (let j in currentData[i]) {
-    //     let td = document.createElement("td");
-    //     td.innerHTML = currentData[i][j];
-    //   }
-    // }
-    // document.getElementById("yjxs_table");
+      //  var currentData = [];
+      // for (let i = 0; i < 5; i++) {
+      //   currentData.push(this.yjs_tableData[this.currentTableIndex * 5 + i]);
+      // }
+      // this.yjs_tableData;
+      // let tbody = document.getElementById("tbody");
+      // for (let i = 0; i < currentData.length; i++) {
+      //   let tr = document.createElement("tr");
+      //   tbody.appendChild(tr);
+      //   for (let j in currentData[i]) {
+      //     let td = document.createElement("td");
+      //     td.innerHTML = currentData[i][j];
+      //   }
+      // }
+      // document.getElementById("yjxs_table");
     },
   },
 };
 </script>
 
   <style scoped>
+  .paging{
+    z-index: 9999;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 #buidings {
   position: absolute;
   width: 100%;
@@ -282,6 +299,7 @@ export default {
   position: absolute;
 }
 #img1 {
+  pointer-events: none;
   bottom: 1%;
   left: 50%;
   transform: translateX(-50%);