表格样式调整

src/assets/scss/dataBoard/table.scss

@@ -1,22 +1,34 @@
 .table {
-  /deep/ .el-table td, /deep/ .el-table th, /deep/ .el-table tr {
-    padding: 14px !important;
-    border:none!important;
-    min-height: 52px;
 
+  /deep/ .el-table td,
+  /deep/ .el-table tr {
+    padding: 3px 14px !important;
+    border: none !important;
+    // min-height: 52px;
+  }
+
+  /deep/ .el-table th {
+    padding: 6px 14px !important;
+    border: none !important;
+    // min-height: 52px;
   }
-  /deep/ .el-table td, /deep/ .el-table th {
+
-    background: none!important;
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
   }
+
   /deep/ .el-table td {
     font-size: 14px;
     font-weight: 400;
     color: #FFFFFF;
-    text-shadow: 1px 2px 4px rgba(10,32,60,0.51);
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
   }
+
   /deep/ .el-table tr {
-    background: url("@/assets/images/manyidu/table_line.png") no-repeat bottom center!important;
+    background: url("@/assets/images/manyidu/table_line.png") no-repeat bottom center !important;
-    background-size: 100%!important;
+    background-size: 100% !important;
+
     &:hover {
       background-color: rgba(26, 149, 255, 0.3) !important;
     }
@@ -26,18 +38,21 @@
     background: none !important;
 
     &:before {
-      background: url("@/assets/images/manyidu/table_line.png") no-repeat bottom center!important;
+      background: url("@/assets/images/manyidu/table_line.png") no-repeat bottom center !important;
     }
   }
+
   /deep/ .el-table__header-wrapper tr {
     color: #A3B9DA !important;
     font-size: 14px;
     font-weight: 400;
     opacity: 0.76;
+
     &:hover {
-      background: none!important;
+      background: none !important;
     }
   }
+
   /deep/ .el-table__header-wrapper {
     background: url("@/assets/images/manyidu/table_head_bg.png") no-repeat top center;
   }

src/views/dataBoard/overview/components/jdwgy.vue

@@ -1,16 +1,7 @@
 <template>
   <div class="m-subbox m-jdwgy">
     <div class="table">
-      <el-table
+      <el-table :data="list" v-if="currentLevelData.orgLevel != 'grid' && peopleType != 'staffDepartment'" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)" max-height="190px" height="190px">
-        :data="list"
-        v-if="
-          currentLevelData.orgLevel != 'grid' && peopleType != 'staffDepartment'
-        "
-        v-loading="loading"
-        element-loading-background="rgba(0, 0, 0, 0.3)"
-        max-height="190px"
-        height="190px"
-      >
         <el-table-column label="序号" type="index" width="80" />
         <el-table-column prop="orgName" width="120" label="组织名称" />
         <el-table-column prop="name" width="120" label="姓名" />
@@ -27,25 +18,13 @@
         </el-table-column>
         <el-table-column prop="operate" width="80" label="操作">
           <template slot-scope="scope">
-            <el-button @click="handleClick(scope.row)" type="text" size="small">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"> 查看</el-button>
-              查看</el-button
-            >
           </template>
         </el-table-column>
       </el-table>
 
       <!-- 单位/组织 -->
-      <el-table
+      <el-table :data="unitList" v-if="currentLevelData.orgLevel != 'grid' && peopleType === 'staffDepartment'" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)" max-height="190px" height="190px">
-        :data="unitList"
-        v-if="
-          currentLevelData.orgLevel != 'grid' &&
-          peopleType === 'staffDepartment'
-        "
-        v-loading="loading"
-        element-loading-background="rgba(0, 0, 0, 0.3)"
-        max-height="190px"
-        height="190px"
-      >
         <el-table-column label="序号" type="index" width="80" />
         <el-table-column prop="departmentName" label="单位名称" />
         <el-table-column prop="departmentDuty" label="职责" />
@@ -53,20 +32,12 @@
         <el-table-column prop="totalUser" label="总人数" />
       </el-table>
 
-      <el-table
+      <el-table v-if="currentLevelData.orgLevel == 'grid'" :data="wglist" v-loading="loading" max-height="190px" height="190px">
-        v-if="currentLevelData.orgLevel == 'grid'"
-        :data="wglist"
-        v-loading="loading"
-        max-height="190px"
-        height="190px"
-      >
         <el-table-column label="序号" type="index" width="50" />
         <el-table-column prop="name" width="140" label="组织名称" />
         <el-table-column prop="type" width="90" label="类型">
           <template slot-scope="scope">
-            <span :style="'color:' + scope.row.type">{{
+            <span :style="'color:' + scope.row.type">{{ types[scope.row.type] }}</span>
-              types[scope.row.type]
-            }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="houseNum" width="90" label="户数" />
@@ -76,9 +47,7 @@
         <el-table-column prop="safetyNum" label="安全隐患" />
         <el-table-column prop="operate" width="80" label="操作">
           <template slot-scope="scope">
-            <el-button @click="handleClick(scope.row)" type="text" size="small">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"> 查看</el-button>
-              查看</el-button
-            >
           </template>
         </el-table-column>
       </el-table>
@@ -140,41 +109,21 @@ export default {
       this.loading = true;
       if (this.currentLevelData.orgLevel == "grid") {
         const personType = this.ifUnit ? "unit" : this.peopleType;
-        this.$http
+        this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" + personType + "&level=" + this.currentLevelData.orgLevel + "&orgId=" + this.currentLevelData.orgId).then(({ data: { data } }) => {
-          .get(
+          this.loading = false;
-            "/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" +
+          this.wglist = data;
-              personType +
+          this.$emit(
-              "&level=" +
+            "setPoint",
-              this.currentLevelData.orgLevel +
+            data.filter((item) => item.longitude && item.latitude)
-              "&orgId=" +
+          );
-              this.currentLevelData.orgId
+        });
-          )
-          .then(({ data: { data } }) => {
-            this.loading = false;
-            this.wglist = data;
-            this.$emit(
-              "setPoint",
-              data.filter((item) => item.longitude && item.latitude)
-            );
-          });
       } else {
-        this.$http
+        this.$http.get("/actual/base/streetOverview/queryPersonnelGroup?level=" + this.currentLevelData.orgLevel + "&orgId=" + this.currentLevelData.orgId + "&personnelType=" + this.peopleType).then(({ data: { data } }) => {
-          .get(
+          this.loading = false;
-            "/actual/base/streetOverview/queryPersonnelGroup?level=" +
+          this.list = data.personnelInfoVOList;
-              this.currentLevelData.orgLevel +
+          this.unitList = data.departmentInfoVOList ? data.departmentInfoVOList : [];
-              "&orgId=" +
+          this.$emit("setNum", data.orgPersonnelVOList);
-              this.currentLevelData.orgId +
+        });
-              "&personnelType=" +
-              this.peopleType
-          )
-          .then(({ data: { data } }) => {
-            this.loading = false;
-            this.list = data.personnelInfoVOList;
-            this.unitList = data.departmentInfoVOList
-              ? data.departmentInfoVOList
-              : [];
-            this.$emit("setNum", data.orgPersonnelVOList);
-          });
       }
     },
     handleClick(item) {
@@ -201,20 +150,17 @@ export default {
   },
 };
 </script>
-<style
+<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
-  lang="scss"
-  src="@/assets/scss/dataBoard/overview/index.scss"
-  scoped
-></style>
 <style lang="scss" src="@/assets/scss/dataBoard/table.scss" scoped></style>
 <style lang="scss" scoped>
 /deep/ .table {
   .el-table {
     &:before {
-      display: none!important;
+      display: none !important;
     }
+    
     td {
-      padding: 9px 14px !important;
+      padding: 3px 14px !important;
     }
 
     // th {