From 412d8469ef653c93bd722cd9e5ead8b0f56e4d6e Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Mon, 22 Nov 2021 16:35:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E8=8B=A5=E5=B9=B2?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E6=8F=90=E5=87=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/communityService/shzz/index.vue   |   2 +-
 .../warning/components/screen-table/index.vue | 366 ++++++++++--------
 2 files changed, 212 insertions(+), 156 deletions(-)

diff --git a/src/views/modules/communityService/shzz/index.vue b/src/views/modules/communityService/shzz/index.vue
index f55570b0..d09d1dff 100644
--- a/src/views/modules/communityService/shzz/index.vue
+++ b/src/views/modules/communityService/shzz/index.vue
@@ -53,7 +53,7 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-col :span="12">
+            <el-col :span="24">
               <div class="resi-cell">
                 <div class="resi-cell-label">服务时间</div>
                 <div class="resi-cell-value" :class="'resi-cell-value-radio'">
diff --git a/src/views/modules/visual/warning/components/screen-table/index.vue b/src/views/modules/visual/warning/components/screen-table/index.vue
index 7b6dce78..41c80f97 100644
--- a/src/views/modules/visual/warning/components/screen-table/index.vue
+++ b/src/views/modules/visual/warning/components/screen-table/index.vue
@@ -1,62 +1,101 @@
 <template>
   <div class="warning-table">
-      <div class="table">
-        <div class="table-header">
-          <div class="table-header-th" v-for="(item,index) in headerList" :key='item.title' :style="headerStyle[index]">{{item.title}}</div>
+    <div class="table">
+      <div class="table-header">
+        <div
+          class="table-header-th"
+          v-for="(item, index) in headerList"
+          :key="item.title"
+          :style="headerStyle[index]"
+        >
+          {{ item.title }}
         </div>
-        <div class="table-body">
-          <div class="table-body-tr" v-for="(value,index) in tableData" :key='index'>
-            <div class="td" v-for="(item,indexs) in value" :key="indexs" :style="tableContentStyle[indexs]">{{item}}
-              <span v-if="(indexs+1==value.length) && item.length>8" class="more" @click="onClickMorePop(index)" ref='morePop'>
-                更多>
-                <span class="more-pop" v-if="visiblePopList[index]">
-                  <!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
+      </div>
+      <div class="table-body">
+        <div
+          class="table-body-tr"
+          v-for="(value, index) in tableData"
+          :key="index"
+        >
+          <div
+            class="td"
+            v-for="(item, indexs) in value"
+            :key="indexs"
+            :style="tableContentStyle[indexs]"
+          >
+            {{ item }}
+            <span
+              v-if="indexs + 1 == value.length && item.length > 8"
+              class="more"
+              @click.stop="onClickMorePop(index)"
+              ref="morePop"
+            >
+              更多>
+              <span class="more-pop" v-if="visiblePopList[index]">
+                <!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
                   李易峰、赵敏、何军、曲树惠 -->
-                  {{item}}
-                </span>
+                {{ item }}
               </span>
-            </div>
-          </div>
-          <screen-loading v-if="visibleLoading">加载中</screen-loading>
-          <div class="no-data" v-if="tableData.length==0 && !visibleLoading">
-            <img src="../../../../../../assets/img/modules/visual/noData.png" alt="" srcset="" class="no-data-img">
+            </span>
           </div>
         </div>
+        <screen-loading v-if="visibleLoading">加载中</screen-loading>
+        <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
+          <img
+            src="../../../../../../assets/img/modules/visual/noData.png"
+            alt=""
+            srcset=""
+            class="no-data-img"
+          />
+        </div>
       </div>
+    </div>
   </div>
 </template>
 
 <script>
-import ScreenLoading from '../screen-loading/index'
-import Vue from 'vue'
+import ScreenLoading from "../screen-loading/index";
+import Vue from "vue";
 export default {
-name: 'warning-table',
-components:{
-  ScreenLoading
-},
-props: {
+  name: "warning-table",
+  components: {
+    ScreenLoading,
+  },
+  props: {
     headerList: {
       type: Array,
       required: false,
       default: () => {
         return [
-          { title: '序号' },
-          { title: '所属网格'},
-          { title: '所属小区'},
-          { title: '楼号'},
-          { title: '姓名' },
-        ]
-      }
+          { title: "序号" },
+          { title: "所属网格" },
+          { title: "所属小区" },
+          { title: "楼号" },
+          { title: "姓名" },
+        ];
+      },
     },
     tableData: {
       type: Array,
       required: false,
       default: () => {
         return [
-        [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [2,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        ]
-      }
+          // [
+          //   1,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+          // [
+          //   2,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+        ];
+      },
     },
     // 单独给头部设置样式
     headerStyle: {
@@ -70,8 +109,8 @@ props: {
           // {
           //   width:'200px'
           // }
-        ]
-      }
+        ];
+      },
     },
     // 单独给内容设置样式
     tableContentStyle: {
@@ -85,13 +124,13 @@ props: {
           // {
           //   width:'200px'
           // }
-        ]
-      }
+        ];
+      },
+    },
+    visibleLoading: {
+      type: Boolean,
+      default: true,
     },
-    visibleLoading:{
-      type:Boolean,
-      default:true
-    }
     // // 表格平均分的份数
     // ava: {
     //   type: Number,
@@ -110,145 +149,162 @@ props: {
   },
   data() {
     return {
-      visiblePopList:[false,false,false,false,false,false,false,false,false,false],
+      visiblePopList: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+      ],
     };
   },
-mounted () {
-    // window.addEventListener('click', e => {
-    //   if (this.$refs.morePop && !this.$refs.morePop.contains(e.target)) {
-    //      this.visiblePopList.forEach((item,indexs)=>{
-    //       Vue.set(this.visiblePopList, indexs, false)
-    //     })
-    //   }
-    // })
+  watch: {
+    tableData(arr) {
+      if (Array.isArray(arr)) {
+        this.visiblePopList = new Array(arr.length).fill(false);
+      }
+    },
   },
-  created(){
+
+  mounted() {
+    window.addEventListener("click", (e) => {
+      this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
+    });
   },
+
+  created() {},
+
   methods: {
-      onClickMorePop(index) {
-        this.visiblePopList.forEach((item,indexs)=>{
-          if(index==indexs){
-            Vue.set(this.visiblePopList, index, true)
-              }else{
-            Vue.set(this.visiblePopList, indexs, false)
-          }
-        })
-      }
+    onClickMorePop(index) {
+      this.visiblePopList.forEach((item, indexs) => {
+        if (index == indexs) {
+          Vue.set(this.visiblePopList, index, true);
+        } else {
+          Vue.set(this.visiblePopList, indexs, false);
+        }
+      });
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.warning-table{
-     box-sizing: border-box;
-     width: 100%;
-     height: 100%;
-    .table {
+.warning-table {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  .table {
+    width: 100%;
+    height: 100%;
+    &-header {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: rgba(8, 37, 134, 0.85);
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        width: calc(100% / 5);
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
       width: 100%;
-      height: 100%;
-      &-header {
+      height: calc(100% - 50px);
+      font-size: 18px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-tr {
         width: 100%;
         height: 50px;
+        // height: calc(100% / 10);
         display: flex;
         justify-content: space-around;
         align-items: center;
-        background: rgba(8, 37, 134, 0.85);
-        font-size: 16px;
-        font-weight: 400;
-        color: #FFFFFF;
 
-        &-th {
+        .td {
           text-align: center;
           width: calc(100% / 5);
-        }
-      }
+          .more {
+            font-size: 18px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
 
-      &-body {
-        box-sizing: border-box;
-        width: 100%;
-        height: calc(100% - 50px);
-        font-size: 18px;
-        font-weight: 400;
-        color: #FFFFFF;
-
-        &-tr {
-          width: 100%;
-          height: 50px;
-          // height: calc(100% / 10);
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-
-          .td {
-            text-align: center;
-            width: calc(100% / 5);
-            .more {
-              font-size: 18px;
+            &-pop {
+              box-sizing: border-box;
+              display: block;
+              box-sizing: border-box;
+              width: 215px;
+              height: auto;
+              line-height: 20px;
+              border: 1px solid red;
+              position: absolute;
+              right: -100%;
+              top: 150%;
+              background: #06186d;
+              border: 1px solid #1a64cc;
+              border-radius: 5px;
+              font-size: 9px;
               font-weight: 400;
-              color: #E4DC00;
-              position: relative;
-              
-              &-pop{
-                box-sizing: border-box;
-                display: block;
-                box-sizing: border-box;
-                width: 215px;
-                height: auto;
-                line-height: 20px;
-                border: 1px solid red;
-                position: absolute;
-                left: -100%;
-                top: 150%;
-                background: #06186D;
-                border: 1px solid #1A64CC;
-                border-radius: 5px;
-                font-size: 9px;
-                font-weight: 400;
-                color: #FFFFFF;
-                padding:16px 8px 10px 9px;
-                z-index: 1;
-                // &::after{
-                //   position: absolute;
-                //   left: 30%;
-                //   top: -30%;
-                //   display: flex;
-                //   content:'';
-                //   width: 0;
-                //   height: 0;
-                //   border-width: 13px;
-                //   border-style: solid;
-                //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
-                //   // border-color: transparent transparent red transparent;
-                //   transform: translate(-50%,0);
-                // }
-              }
-          
+              color: #ffffff;
+              padding: 16px 8px 10px 9px;
+              z-index: 1;
+              cursor: default;
+              // &::after{
+              //   position: absolute;
+              //   left: 30%;
+              //   top: -30%;
+              //   display: flex;
+              //   content:'';
+              //   width: 0;
+              //   height: 0;
+              //   border-width: 13px;
+              //   border-style: solid;
+              //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+              //   // border-color: transparent transparent red transparent;
+              //   transform: translate(-50%,0);
+              // }
             }
           }
         }
+      }
 
-        &-tr:nth-child(2n) {
-          background: rgba(16, 75, 164, 0.24);
-        }
+      &-tr:nth-child(2n) {
+        background: rgba(16, 75, 164, 0.24);
+      }
 
-        &-tr:hover {
-          background: url('../../../../../../assets/img/modules/visual/hover-bac.png') no-repeat center;
-          background-size: 100% 100%;
-        }
-        // 暂无数据
-        .no-data{
-          width: 100%;
-          height: calc(100% - 50px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          &-img{
-            width: 249px;
-            height: 172px;
-          }
+      &-tr:hover {
+        background: url("../../../../../../assets/img/modules/visual/hover-bac.png")
+          no-repeat center;
+        background-size: 100% 100%;
+      }
+      // 暂无数据
+      .no-data {
+        width: 100%;
+        height: calc(100% - 50px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-img {
+          width: 249px;
+          height: 172px;
         }
       }
-
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>