You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
9.1 KiB
388 lines
9.1 KiB
<template>
|
|
<div>
|
|
<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>
|
|
<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]"
|
|
>
|
|
<div v-if="Array.isArray(item)">
|
|
<span
|
|
v-show="rIndex < 3"
|
|
:key="resi.userId"
|
|
v-for="(resi, rIndex) in item"
|
|
>
|
|
{{ rIndex != 0 ? "、" : "" }}
|
|
<a @click="handlePeopleItem(resi.userId, value[1])">{{
|
|
resi.residentName
|
|
}}</a>
|
|
</span>
|
|
</div>
|
|
<span v-else>{{ item }}</span>
|
|
<span
|
|
v-if="indexs + 1 == value.length && item.length > 3"
|
|
class="more"
|
|
@click.stop="onClickMorePop(index)"
|
|
ref="morePop"
|
|
>
|
|
更多>
|
|
<div class="more-pop" v-if="visiblePopList[index]">
|
|
<span
|
|
:key="index + rIndex + resi.userId"
|
|
v-for="(resi, rIndex) in item"
|
|
>
|
|
{{ rIndex != 0 ? "、" : "" }}
|
|
<a @click="handlePeopleItem(resi.userId, value[1])">{{
|
|
resi.residentName
|
|
}}</a>
|
|
</span>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<screen-loading v-if="visibleLoading">加载中</screen-loading>
|
|
<div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
|
|
暂无数据
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<people-more
|
|
v-if="showedPeopleMoreInfo && currentPepeleId"
|
|
:userId="currentPepeleId"
|
|
:gridName="currentPepeleGridName"
|
|
@close="showedPeopleMoreInfo = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ScreenLoading from "../screen-loading/index";
|
|
import Vue from "vue";
|
|
import peopleMore from "@/views/modules/shequ/cpts/people-more";
|
|
|
|
export default {
|
|
name: "warning-table",
|
|
components: {
|
|
ScreenLoading,
|
|
peopleMore,
|
|
},
|
|
props: {
|
|
headerList: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => {
|
|
return [
|
|
{ title: "序号" },
|
|
{ title: "所属网格" },
|
|
{ title: "所属小区" },
|
|
{ title: "楼号" },
|
|
{ title: "姓名" },
|
|
];
|
|
},
|
|
},
|
|
tableData: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => {
|
|
return [
|
|
// [
|
|
// 1,
|
|
// "商丘路社区第一网格",
|
|
// "商丘路小区",
|
|
// "2号楼",
|
|
// "杨颖、王平、刘佳敏、丁辉、杨萍",
|
|
// ],
|
|
// [
|
|
// 2,
|
|
// "商丘路社区第一网格",
|
|
// "商丘路小区",
|
|
// "2号楼",
|
|
// "杨颖、王平、刘佳敏、丁辉、杨萍",
|
|
// ],
|
|
];
|
|
},
|
|
},
|
|
// 单独给头部设置样式
|
|
headerStyle: {
|
|
type: Array,
|
|
default: () => {
|
|
return [
|
|
// {
|
|
// width:'200px',
|
|
// border:'1px solid red'
|
|
// },
|
|
// {
|
|
// width:'200px'
|
|
// }
|
|
];
|
|
},
|
|
},
|
|
// 单独给内容设置样式
|
|
tableContentStyle: {
|
|
type: Array,
|
|
default: () => {
|
|
return [
|
|
// {
|
|
// width:'200px',
|
|
// border:'1px solid red'
|
|
// },
|
|
// {
|
|
// width:'200px'
|
|
// }
|
|
];
|
|
},
|
|
},
|
|
visibleLoading: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
// // 表格平均分的份数
|
|
// ava: {
|
|
// type: Number,
|
|
// default: 8
|
|
// },
|
|
// // 表头高度--默认占比10%
|
|
// headerHeightAva: {
|
|
// type: String,
|
|
// default: '10%'
|
|
// },
|
|
// // 表格主体平均分成的份数
|
|
// tableContentAva: {
|
|
// type: Number,
|
|
// default: 5
|
|
// },
|
|
},
|
|
data() {
|
|
return {
|
|
// 显示人员详情
|
|
showedPeopleMoreInfo: false,
|
|
|
|
currentPepeleId: "",
|
|
currentPepeleGridName: "",
|
|
|
|
visiblePopList: [
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
],
|
|
};
|
|
},
|
|
watch: {
|
|
tableData(arr) {
|
|
if (Array.isArray(arr)) {
|
|
this.visiblePopList = new Array(arr.length).fill(false);
|
|
}
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
window.addEventListener("click", (e) => {
|
|
this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
|
|
});
|
|
},
|
|
|
|
created() {},
|
|
|
|
methods: {
|
|
toUserInfo(uid) {
|
|
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
|
|
},
|
|
|
|
handlePeopleItem(uid, gridName) {
|
|
this.currentPepeleId = uid;
|
|
this.currentPepeleGridName = gridName;
|
|
|
|
this.showedPeopleMoreInfo = true;
|
|
},
|
|
|
|
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 {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #dfdfdd;
|
|
|
|
&-header {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: #2194fe;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
|
|
&-th {
|
|
text-align: center;
|
|
width: 20%;
|
|
&:nth-child(1) {
|
|
width: 5%;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 25%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 25%;
|
|
}
|
|
&:nth-child(5) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-body {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: calc(100% - 50px);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #333;
|
|
&-tr {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
border-bottom: 1px dashed #dfdfdd;
|
|
|
|
.td {
|
|
text-align: center;
|
|
width: 20%;
|
|
border-left: 1px dashed #dfdfdd;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
&:nth-child(1) {
|
|
width: 5%;
|
|
border-left: 0;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 25%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 25%;
|
|
}
|
|
&:nth-child(5) {
|
|
width: 25%;
|
|
}
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
.more {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #e4dc00;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&-pop {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 500px;
|
|
height: auto;
|
|
line-height: 20px;
|
|
border: 1px solid red;
|
|
position: absolute;
|
|
right: -100%;
|
|
bottom: 150%;
|
|
background: #fff;
|
|
box-shadow: 0 0 10px 0 #2194fe;
|
|
border: 1px solid #42a4fe;
|
|
border-radius: 5px;
|
|
font-size: 9px;
|
|
font-weight: 400;
|
|
color: #333;
|
|
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);
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&-tr:nth-child(2n) {
|
|
}
|
|
|
|
&-tr:hover {
|
|
background: rgba(16, 75, 164, 0.1);
|
|
}
|
|
// 暂无数据
|
|
.no-data {
|
|
width: 100%;
|
|
height: calc(100vh - 650px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|