更新表格ui

shuzhixiangzheng/src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import './assets/base.css'
    import Map from "./assets/api/Map.js"
 export default {
   name: 'container',

shuzhixiangzheng/src/assets/api/Map.js

@@ -268,7 +268,7 @@ class Map{
             console.log(this._viewer)
             }
         });
-        debugger
+        // debugger
         return name;
     }
     

shuzhixiangzheng/src/assets/base.css

@@ -0,0 +1,84 @@
+.el-table__header{
+  width: 100% !important;
+}
+
+.el-table tr{
+  color: #fff;
+  background-color: #030f29 !important;
+}
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+  border-bottom: none !important;
+}
+.el-table::before{
+  height: 0px !important;
+}
+.el-table__body-wrapper{
+  background-color: #030f29;
+}
+.el-table__empty-text{
+  color: #fff !important;
+}
+/* .el-table__row:hover{
+  background-color: #04193b !important;
+} */
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+  background-color: #04193b !important;
+}
+/* .el-table .el-table__cell.gutter{
+  display: none !important;
+} */
+.el-table .el-table__cell{
+  text-align: center !important;
+}
+.el-table__body{
+  width: 100% !important;
+}
+#yjxs_table{
+  width: 50% !important;
+}
+
+
+  .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+  }
+  .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+  .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background   : #ededed;
+  }
+  /* .el-table--scrollable-y .el-table__body-wrapper{
+    
+    overflow-y: visible !important;
+  }
+  .el-table__body{
+    max-height: 100px;
+    overflow-y: auto;
+  } */
+
+  body .el-table th.gutter{
+    display: table-cell!important;
+  }
+  table,tbody,thead {
+      width: 100% !important;
+    }
+    colgroup {
+      position: absolute;
+      width: 100% !important;
+      display: flex;
+    }
+    col {
+      flex: 1;
+      text-align: center;
+    }
+    .el-table .el-table__cell.gutter{
+      width: 0px !important;
+    }

shuzhixiangzheng/src/components/DaZhongPage.vue

@@ -13,6 +13,7 @@
                 </img>
                     <div id="numberDiv" v-show="form_show">{{houseNum}}</div>
                     <el-table
+                    :header-cell-style="{background:'#0b61c5',color:'#fff','font-weight': 700}"
                     v-show="form_show"
                     id="table"
                     :data="jhgj_tableData"
@@ -26,27 +27,27 @@
                     <el-table-column
                       prop="sexName"
                       label="性别"
-                      width="100">
+                      width="80">
                     </el-table-column>
                     <el-table-column
-                      prop="ageName"
+                      prop="age"
                       label="年龄"
-                      width="100">
+                      width="80">
                     </el-table-column>
                     <el-table-column
                     prop="type"
                     label="类别"
-                    width="100">
+                    width="80">
                   </el-table-column>
                     <el-table-column
                     prop="workspace"
                     label="工作单位"
-                    width="100">
+                    >
                     </el-table-column>
                     <el-table-column
                     prop="telephone"
                     label="联系方式"
-                    width="100">
+                    >
                 </el-table-column>
                   </el-table>
 

shuzhixiangzheng/src/components/ZheJiPage.vue

@@ -19,42 +19,43 @@
         id="yjxs_table"
         :data="yjs_tableData"
         max-height="200"
-        :header-cell-style="{background:'#0A62C6','color': '#fff'}"
+        :header-cell-style="{background:'#0b61c5',color:'#fff'}"
         style="width: 38%;">
         <el-table-column
-          prop="num"
-          label="房号"
-          width="100">
+          prop="id"
+          label="序号"
+          width="100"
+          >
         </el-table-column>
         <el-table-column
           prop="name"
           label="姓名"
-          width="100">
+          >
         </el-table-column>
         <el-table-column
           prop="sexName"
           label="性别"
-          width="100">
+          >
         </el-table-column>
         <el-table-column
           prop="age"
           label="年龄"
-          width="100">
+          >
         </el-table-column>
         <el-table-column
         prop="type"
         label="类别"
-        width="100">
+        >
       </el-table-column>
         <el-table-column
         prop="workspace"
         label="工作单位"
-        width="100">
+        >
         </el-table-column>
         <el-table-column
         prop="telephone"
         label="联系方式"
-        width="100">
+        >
     </el-table-column>
       </el-table>
 
@@ -67,275 +68,285 @@
   </template>
   
   <script>
-      import Time from "./Time.vue"
-      import ReturnButton from "./ReturnButton.vue"
-  import Map from "../assets/api/Map.js"
-  import left2Png from "../assets/png/left2.png"
-  import right2Png from "../assets/png/right2.png"
-  import house2Png from "../assets/png/house2.png"
-  import {jinghuguoji_httpGet} from "../assets/api/loadData.js"
-  export default {
-    name: 'ZheJiDPage',
-    components:{
+import Time from "./Time.vue";
+import ReturnButton from "./ReturnButton.vue";
+import Map from "../assets/api/Map.js";
+import left2Png from "../assets/png/left2.png";
+import right2Png from "../assets/png/right2.png";
+import house2Png from "../assets/png/house2.png";
+import { jinghuguoji_httpGet } from "../assets/api/loadData.js";
+export default {
+  name: "ZheJiDPage",
+  components: {
     Time,
-    ReturnButton
+    ReturnButton,
+  },
+  data() {
+    return {
+      msg: "",
+      form_show: false,
+      left2Png_url: left2Png,
+      right2Png_url: right2Png,
+      house2Png_url: house2Png,
+      houseNum: "1橦",
+      yjs_tableData: [
+        {
+          num: "",
+          sexName: "请求中...",
+          name: "请求中...",
+          age: "请求中...",
+          type: "请求中...",
+          workspace: "请求中...",
+          telephone: "请求中...",
+        },
+      ],
+      currentTableIndex: 0,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.cesiumMap.addGaode();
+      this.doEvent();
+    });
+    this.lxw_changeHouse();
+  },
+  methods: {
+    doEvent() {
+      window.cesiumMap.left_clickFun(
+        this.clickjinghuguojiShowFun,
+        this.jinghuguojiShowFun,
+        this.laoxianweisusheShowFun,
+        this.yejiaxiaosheShowFun
+      );
     },
-    data () {
-      return {
-        msg: '',
-        form_show:false,
-        left2Png_url:left2Png,
-        right2Png_url:right2Png,
-        house2Png_url:house2Png,
-        houseNum:"1橦",
-        yjs_tableData:[{
-            num:"",
-            sexName: '请求中...',
-          name: '请求中...',
-          age: '请求中...',
-          type:"请求中...",
-          workspace:"请求中...",
-          telephone:"请求中..."
-        }],
-        currentTableIndex:0
-      }
+    clickjinghuguojiShowFun() {},
+    jinghuguojiShowFun() {},
+    laoxianweisusheShowFun() {},
+    yejiaxiaosheShowFun() {
+      this.form_show = true;
     },
-    mounted(){
-        this.$nextTick(()=>{
-        window.cesiumMap.addGaode();
-        this.doEvent();
-        
-      })
-       this.lxw_changeHouse();
+    close_showFun() {
+      this.form_show = false;
     },
-    methods:{
-        
-        doEvent(){
-            window.cesiumMap.left_clickFun(this.clickjinghuguojiShowFun,this.jinghuguojiShowFun,this.laoxianweisusheShowFun,this.yejiaxiaosheShowFun)
-        },
-        clickjinghuguojiShowFun(){},
-        jinghuguojiShowFun(){},
-        laoxianweisusheShowFun(){},
-        yejiaxiaosheShowFun(){
-            this.form_show=true;
-        },
-        close_showFun(){
-            this.form_show=false;
+    lxw_changeHouse() {
+      let house1sCode = [1, 20];
+
+      // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
+      jinghuguoji_httpGet(
+        {
+          villageName: "叶家舍安置小区",
+          buildingNumber: 1,
         },
-        lxw_changeHouse(){
-            let house1sCode=[1,20];
-            
-                    // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
-            jinghuguoji_httpGet({
-                villageName:"叶家舍安置小区",
-                buildingNumber:1,
-                },(result)=>{
-                this.houseNum="1"+"橦"
-                this.yjs_tableData=result.data.data
-                 },()=>{}
-             );
-            house1sCode.map(c=>{
-                document.getElementById("building_"+c).addEventListener("click",()=>{
-                    // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
-                    jinghuguoji_httpGet({
-                        villageName:"叶家舍安置小区",
-                        buildingNumber:c,
-                        },(result)=>{
-                            this.houseNum=c+"橦"
-                            this.yjs_tableData=result.data.data;
-                         
-                           // this.yjs_tableData.num=
-                        },()=>{}
-                    );
-                })
-            });
+        (result) => {
+          this.houseNum = "1" + "橦";
+          console.log(11111111111, result.data.data);
+          this.yjs_tableData = result.data.data;
         },
-       // 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") 
-        // },
-    }
-  }
-  </script>
-
-  <style scoped>
-         #buidings{
-            position: absolute;
-            width: 100%;
-            height: 100%;
-        }
-          #numberDiv{
-        position: absolute;
-        z-index: 113;
-        width: 200px;
-        height: 100px;
-        left: 29%;
-        color: azure;
-        font-size: 35px;
-        top:60%
-    }
-    #yjxs_table {
-        position: absolute;
-         z-index: 103;
-         left: 27%;
-         top: 66%;
-         border:none;
-         color: rgb(19, 37, 37);
-      }
+        () => {}
+      );
+      house1sCode.map((c) => {
+        document
+          .getElementById("building_" + c)
+          .addEventListener("click", () => {
+            // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
+            jinghuguoji_httpGet(
+              {
+                villageName: "叶家舍安置小区",
+                buildingNumber: c,
+              },
+              (result) => {
+                this.houseNum = c + "橦";
+                this.yjs_tableData = result.data.data;
 
+                // this.yjs_tableData.num=
+              },
+              () => {}
+            );
+          });
+      });
+    },
+    addDataToTable() {
+    //  var currentData = [];
+    // for (let i = 0; i < 5; i++) {
+    //   currentData.push(this.yjs_tableData[this.currentTableIndex * 5 + i]);
+    // }
 
-      #building_1{
-            position: absolute;
-            left: 38%;
-            top: 16%;
-            z-index: 114;
-            width: 70px;
-            height: 40px;
-        }
-        #building_20{
-            position: absolute;
-            left: 48.5%;
-            top: 37.5%;
-            z-index: 114;
-            width: 70px;
-            height: 40px;
-        }
-    @media screen and (max-height: 1000px){
-        #numberDiv{
-        position: absolute;
-        z-index: 113;
-        width: 200px;
-        height: 100px;
-        left: 29%;
-        color: azure;
-        font-size: 35px;
-        top:66%
-    }
-    #yjxs_table {
-        position: absolute;
-         z-index: 103;
-         left: 27%;
-         top: 73%;
-         border:none;
-         color: rgb(19, 37, 37);
-      }
-      #building_1{
+    // this.yjs_tableData;
+    // let tbody = document.getElementById("tbody");
 
-            position: absolute;
-            left: 38%;
-            top: 17%;
-            z-index: 114;
-            width: 70px;
-            height: 40px;
-        }
-        #building_20{
-            position: absolute;
-            left: 48.5%;
-            top: 41.5%;
-            z-index: 114;
-            width: 70px;
-            height: 40px;
-        }
+    // 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>
+#buidings {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+#numberDiv {
+  position: absolute;
+  z-index: 113;
+  width: 200px;
+  height: 100px;
+  left: 29%;
+  color: azure;
+  font-size: 35px;
+  top: 60%;
+}
+#yjxs_table {
+  position: absolute;
+  z-index: 103;
+  left: 27%;
+  top: 66%;
+  border: none;
+  color: rgb(19, 37, 37);
+}
 
-      #child1_form{
-            position: absolute;
-            z-index: 101;
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-        }
-     .img{
-            position: absolute;
-        }
-        #img1{
-            bottom:1%;
-            left: 50%; transform: translateX(-50%);
-            z-index:111;
-            width: 50%;
-        }
-        #img2{
-            top:-1%;
-            left: 50%; transform: translateX(-50%);
-            z-index:111;
-            width: 30%;
-        }
-        #img3{
-            left: 2%;
-            top:7%;
-            z-index:2;
-            width:23%
-        }
-        #img4{
-            z-index:-1
-        }
-        #img5{
-            right: 2%;
-            top:7%;
-            z-index:2;
-            width:23%
-        }
+#building_1 {
+  position: absolute;
+  left: 38%;
+  top: 16%;
+  z-index: 114;
+  width: 70px;
+  height: 40px;
+}
+#building_20 {
+  position: absolute;
+  left: 48.5%;
+  top: 37.5%;
+  z-index: 114;
+  width: 70px;
+  height: 40px;
+}
+@media screen and (max-height: 1000px) {
+  #numberDiv {
+    position: absolute;
+    z-index: 113;
+    width: 200px;
+    height: 100px;
+    left: 29%;
+    color: azure;
+    font-size: 35px;
+    top: 66%;
+  }
+  #yjxs_table {
+    position: absolute;
+    z-index: 103;
+    left: 27%;
+    top: 73%;
+    border: none;
+    color: rgb(19, 37, 37);
+  }
+  #building_1 {
+    position: absolute;
+    left: 38%;
+    top: 17%;
+    z-index: 114;
+    width: 70px;
+    height: 40px;
+  }
+  #building_20 {
+    position: absolute;
+    left: 48.5%;
+    top: 41.5%;
+    z-index: 114;
+    width: 70px;
+    height: 40px;
+  }
+}
 
+#child1_form {
+  position: absolute;
+  z-index: 101;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+.img {
+  position: absolute;
+}
+#img1 {
+  bottom: 1%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 111;
+  width: 50%;
+}
+#img2 {
+  top: -1%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 111;
+  width: 30%;
+}
+#img3 {
+  left: 2%;
+  top: 7%;
+  z-index: 2;
+  width: 23%;
+}
+#img4 {
+  z-index: -1;
+}
+#img5 {
+  right: 2%;
+  top: 7%;
+  z-index: 2;
+  width: 23%;
+}
 
-        #x_img,#x_img1{
-            right: 18%;
-            top:13%;
-            z-index: 103;
-            width: 30px;
-        }
-       #form{
-            position: absolute;
-            margin: 0;
-            padding: 0;
-            z-index: 101;
-            width: 100%;
-            height: 100%;
-            
-        }
-        #form_img,#form_img1{
-            width: 70%;
-            left: 15%;
-            top:10%;
-            z-index: 102;
-        }
-        #background_img{
-            z-index: 101;
-            width: 100%;
-            height: 100%;
-        }
-        #child_form{
-            position: absolute;
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-        }
+#x_img,
+#x_img1 {
+  right: 18%;
+  top: 13%;
+  z-index: 103;
+  width: 30px;
+}
+#form {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  z-index: 101;
+  width: 100%;
+  height: 100%;
+}
+#form_img,
+#form_img1 {
+  width: 70%;
+  left: 15%;
+  top: 10%;
+  z-index: 102;
+}
+#background_img {
+  z-index: 101;
+  width: 100%;
+  height: 100%;
+}
+#child_form {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 
-        .house_class{
-         
-         position: absolute;
-         z-index: 114;
-         width: 70px;
-         height: 30px;
-     }
-  
-  </style>
+.house_class {
+  position: absolute;
+  z-index: 114;
+  width: 70px;
+  height: 30px;
+}
+</style>